优秀的编程知识分享平台

网站首页 > 技术文章 正文

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

nanyue 2024-07-26 15:46:11 技术文章 4 ℃

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个方法(如销毁、显示、隐藏、更新选择器方法等),支持键盘操作选择日期,支持日期校验等,功能丰富,希望以后能够加入时间选择。

有哪里写得不好的地方请大家提出来,请轻喷,谢谢。 同时有什么与编程相关的好东西可以推举给我,再次感谢!

最近发表
标签列表