链接:https://bootstrap-datepicker.readthedocs.io/en/stable/
Bootstrap-datepicker在Bootstrap风格中提供了一个灵活的日期选择器小部件。
版本根据semver递增。
要求
这些是特定版本bootstrap-datepicker针对(js
文件)进行测试并针对(文件)进行构建css
。使用其他版本需要您自担风险。
依赖
需要引导程序的下拉组件(dropdowns.less
)以及某些样式的引导程序的精灵(sprites.less
以及相关图像)。
一个独立的.css文件(包括必要的下拉样式和替代方案中,基于文本的箭头)可以通过运行来生成build/build_standalone.less
通过lessc
编译器:
$ lessc build / build_standalone 。少 日期选择器。CSS
用法
通过javascript调用datepicker:
$ ('.datepicker' )。datepicker ();
数据
和bootstrap自带的插件一样,datepicker提供了一个data-api,可以用来实例化datepickers而不需要定制javascript。对于大多数日期选择器,只需设置data-provide="datepicker"
要初始化的元素,然后以真正的引导方式懒惰地初始化。对于内联日期选择器,请使用data-provide="datepicker-inline"
; 这些将在页面加载时立即初始化,并且不能被延迟加载。
< input data-provide = “datepicker” >
与组件标记
< div class = “input-group date” data-provide = “datepicker” >
< input type = “text” class = “form-control” >
< div class = “input-group-addon” >
< span class = “ glyphicon glyphicon-th“ > </ span >
</ div >
</ div >
您可以像禁用其他引导程序插件一样禁用datepicker的data-api:
$ (文档)。off ('.datepicker.data-api' );
配置
选项传递给datepicker
通过在实例化一个选项哈希函数:
$ ('.datepicker' )。datepicker ({
格式: 'mm / dd / yyyy' ,
startDate : '-3d'
});
大多数选项可作为目标元素上的数据属性提供:
< input class = “datepicker” data-date-format = “mm / dd / yyyy” >
$ ('.datepicker' )。datepicker ({
startDate : '-3d'
});
所有选项的默认值可以通过更改$.fn.datepicker.defaults
哈希中的值直接修改:
$ 。fn 。日期选择器。默认值。format = “mm / dd / yyyy” ;
$ ('.datepicker' )。datepicker ({
startDate : '-3d'
});
样式表
库中包含几个不同的样式表。这是每个文件用于什么的概述:
bootstrap-datepicker.css
为twitter bootstrap v2提供传统支持,bootstrap-datepicker3.css
用于twitter bootstrap v3支持,bootstrap-datepicker.standalone.css
并可用于包含datepicker而不依赖于twitter引导程序库。
无冲突模式
$.fn.datepicker.noConflict
提供了一种避免与其他jQuery datepicker插件冲突的方法:
var datepicker = $ 。fn 。日期选择器。noConflict (); //将$ .fn.datepicker返回到以前分配的值
$ 。fn 。bootstrapDP = datepicker ; //给$()。bootstrapDP引导日期选择器功能
目录
- 标记
- 选项
- 自动关闭
- assumeNearbyYear
- beforeShowDay
- beforeShowMonth
- beforeShowYear
- beforeShowDecade
- beforeShowCentury
- calendarWeeks
- clearBtn
- 容器
- datesDisabled
- daysOfWeekDisabled
- daysOfWeekHighlighted
- defaultViewDate
- disableTouchKeyboard
- enableOnReadonly
- 结束日期
- forceParse
- 格式
- immediateUpdates
- 输入
- keepEmptyValues
- keyboardNavigation
- 语言
- maxViewMode
- minViewMode
- multidate
- multidateSeparator
- 方向
- showOnFocus
- 开始日期
- startView
- 模板
- showWeekDays
- 标题
- todayBtn
- todayHighlight
- toggleActive
- updateViewDate
- weekStart
- zIndexOffset
- 快速参考
- 方法
- 活动
- 键盘支持
- 国际化