bootstrap-datepicker是一个开源、基于bootstrap的日期选择器,内置60+种语言,基于bootstrap也使得选择器非常美观适合现代网站,功能强大,通过内置属性、方法、事件组合配置可以满足几乎所有日期选择需求,唯一遗憾的是不支持时间选择,只能选择年月日。
1、下载及初始化
https://github.com/uxsolutions/bootstrap-datepicker
下载完成后解压,把dist文件夹中的所有文件放到项目中任意位置,引入下图所示的文件即可。
然后在页面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个方法(如销毁、显示、隐藏、更新选择器方法等),支持键盘操作选择日期,支持日期校验等,功能丰富,希望以后能够加入时间选择。