自举日期选择器（转载）

链接：https://bootstrap-datepicker.readthedocs.io/en/stable/

Bootstrap-datepicker在Bootstrap风格中提供了一个灵活的日期选择器小部件。

_images / demo_head.png

版本根据semver递增。

在线演示

要求

Bootstrap 2.0.4+
jQuery 1.7.1+

这些是特定版本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引导日期选择器功能

自举日期选择器（转载）

要求

依赖

用法

数据

配置

样式表

无冲突模式

目录

猜你喜欢