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

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

1、下载及初始化

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

下载完成后解压,把dist文件夹中的所有文件放到项目中任意位置,引入下图所示的文件即可。

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

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

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

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

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

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

2、特色展示

⑴组件选择

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

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

⑵内联选择

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

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

⑶范围选择

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

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

⑷格式化日期

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

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

⑸最大最小日期

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

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

⑹选择器开始界面

  • 0:天(默认)
  • 1:月
  • 2:年
  • 3:十年
  • 4:世纪

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

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

⑺最大最小选择精度

minViewMode最小、maxViewMode最大

  • 0:天(最小默认)
  • 1:月
  • 2:年
  • 3:十年
  • 4:世纪(最大默认)

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

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

⑻今日、清除按钮

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

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

⑼选择器方向

  • auto:自动(默认)
  • top auto:向上自动
  • bottom auto:向下自动
  • auto left:自动向左
  • top left:左上
  • bottom left:左下
  • auto right:自动向右
  • top right:右上
  • bottom right:右下

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

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

⑽星期禁用、高亮

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

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

⑾多选、分隔符

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

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

⑿显示第几周

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

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

⒀选择后自动关闭

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

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

⒁今日高亮

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

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

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

有世纪、十年、年、月、日五种类型,如下所示是(日的例子)

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

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

⒃禁用日期

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

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

⒄选中取消

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

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

⒅默认初始化视图

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

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

⒆键盘操作

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

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

⒇星期几作为一周的开始

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

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

在线演示网站:

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

API文档:

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

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

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