一个开源、美观的日期选择器(bootstrap datepicker)

bootstrap-datepicker是一个开源、基于bootstrap的日期选择器，内置60+种语言，基于bootstrap也使得选择器非常美观适合现代网站，功能强大，通过内置属性、方法、事件组合配置可以满足几乎所有日期选择需求，唯一遗憾的是不支持时间选择，只能选择年月日。

1、下载及初始化

然后在页面body元素中创建一个容器，如下所示。

最后在id为sandbox-container的div元素中创建input元素，并运行以下代码脚本，一个日期选择器就创建好了。

2、特色展示

⑴组件选择


⑵内联选择

⑶范围选择


⑷格式化日期


⑸最大最小日期


⑹选择器开始界面

0：天（默认）

1：月

2：年

3：十年

4：世纪


⑺最大最小选择精度

minViewMode最小、maxViewMode最大

0：天（最小默认）

4：世纪（最大默认）

⑻今日、清除按钮

⑼选择器方向

auto：自动（默认）

top auto：向上自动

bottom auto：向下自动

auto left：自动向左

top left：左上

bottom left：左下

auto right：自动向右

top right：右上

bottom right：右下

⑽星期禁用、高亮

⑾多选、分隔符


⑿显示第几周

⒀选择后自动关闭

⒁今日高亮

⒂选择器界面显示之前的回调函数

有世纪、十年、年、月、日五种类型，如下所示是（日的例子）

⒃禁用日期

⒄选中取消

⒅默认初始化视图

⒆键盘操作

⒇星期几作为一周的开始

在线演示网站：

https://uxsolutions.github.io/bootstrap-datepicker/

API文档：

https://bootstrap-datepicker.readthedocs.io/en/latest/index.html

bootstrap datepicker内置8个事件（显示、隐藏选择器事件、清除日期选中事件和世纪、十年、年、月、日改变事件），内置20个方法（如销毁、显示、隐藏、更新选择器方法等），支持键盘操作选择日期，支持日期校验等，功能丰富，希望以后能够加入时间选择。