bootstrap-datepicker

Bootstrap-Datepicker以Bootstrap风格提供了一个灵活的DatePicker小部件。

_images/demo_head.png

版本将根据以下内容递增semver.

在线演示

要求

这些是针对Bootstrap-Datepicker进行测试的特定版本(js文件),并根据(css文件)。使用其他版本的风险自负。

依赖项

需要Bootstrap的下拉组件(dropdowns.less),以及Bootstrap的精灵(sprites.less和相关联的图像)用于箭头。

通过运行以下命令,可以生成独立的.css文件(包括必要的下拉样式和可选的基于文本的箭头build/build_standalone.less通过lessc编译器:

$ lessc build/build_standalone.less datepicker.css

使用

通过javascript调用DatePicker:

$('.datepicker').datepicker();

数据API

与Bootstrap自己的插件一样,Datepicker提供了一个数据API,可以用来实例化日期选择器,而不需要自定义的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:

$(document).off('.datepicker.data-api');

配置

选项传递给datepicker实例化时通过选项散列实现的函数:

$('.datepicker').datepicker({
    format: 'mm/dd/yyyy',
    startDate: '-3d'
});

大多数选项可以作为目标元素上的数据属性提供:

<input class="datepicker" data-date-format="mm/dd/yyyy">
$('.datepicker').datepicker({
    startDate: '-3d'
});

属性中的值可以直接修改所有选项的默认值$.fn.datepicker.defaults哈希:

$.fn.datepicker.defaults.format = "mm/dd/yyyy";
$('.datepicker').datepicker({
    startDate: '-3d'
});

Stylesheets

库中包含一些不同的样式表。这是每个文件的用途概述:

bootstrap-datepicker.css提供对Twitter Bootstrap v2的传统支持,bootstrap-datepicker3.css用于支持twitter bootstrap v3。 和bootstrap-datepicker.standalone.css可用于包含日期选择器,而不依赖于Twitter引导库。

无冲突模式

$.fn.datepicker.noConflict提供了一种避免与其他jQuery Datepicker插件冲突的方法:

var datepicker = $.fn.datepicker.noConflict(); // return $.fn.datepicker to previously assigned value
$.fn.bootstrapDP = datepicker;                 // give $().bootstrapDP the bootstrap-datepicker functionality