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:天(最小默认)
- 1:月
- 2:年
- 3:十年
- 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个方法(如销毁、显示、隐藏、更新选择器方法等),支持键盘操作选择日期,支持日期校验等,功能丰富,希望以后能够加入时间选择。
有哪里写得不好的地方请大家提出来,请轻喷,谢谢。 同时有什么与编程相关的好东西可以推举给我,再次感谢!