Bootstrap-Datepicker的基本用法 - 性感咸鱼，在线翻身

本文最后更新于：1 年前

在用Bootstrap-Datepicker之前，也用过一个日期时间选择插件，同样也是基于Bootstrap的，可以选择日期和时间，但是因为好像有些小bug，所以再就没有用过，后来又找了一款日期选择插件，但是只能选择日期，不能选择时间，在不需要输入具体时间的地方用足够了，并且目前还没有发现什么问题。下面就介绍一下用法吧。

使用和依赖

Bootstrap-datepicker是一款基于Bootstrap样式的datepicker小部件。要求使用Bootstrap 2.0.4 版本以上，jQuery 1.7.1版本以上。

可以下载后引入CSS和JS文件，也可以直接通过CDN引入。

下载的完整库中包含一些不同的样式表。每个CSS文件的用途分别是：

bootstrap-datepicker.css提供对bootstrap v2的旧支持
bootstrap-datepicker3.css用于bootstrap v3支持
bootstrap-datepicker.standalone.css可以直接用于datepicker，而无需依赖 bootstrap 库。

下载地址放在最后参考链接中。

用法

通过javascript调用datepicker：

1	`$('.datepicker').datepicker();`

通过data-API：

与bootstrap自己的插件一样，datepicker提供了一个数据API，可用于实例化datepicker，而无需自定义JavaScript。对于大多数日期选择器，只需在要初始化的元素上设置data-provide="datepicker"，它就会延迟初始化。对于内联日期选择器，请使用data-provide="datepicker-inline"; 这些将在页面加载时立即初始化，并且不能延迟加载。

1	`<input data-provide="datepicker">`

配置

选项datepicker在实例化时通过选项传递到函数：

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

也可以在目标元素上通过data-API属性使用，大多数选项都提供支持：

<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'
});

无冲突模式

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

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

HTML标记

有四种类型的显示方式：

输入框

最简单的方式，当点击输入框或者焦点切换到输入框内时，显示选择器
1
<input type="text" class="form-control" value="02-16-2012">

组件

添加date类到一个输入框组input-group上，这可以让拥有input-group-addon类的元素打开日期选择器。

<div class="input-group date">
  <input type="text" class="form-control" value="12-02-2012">
  <div class="input-group-addon">
      <span class="glyphicon glyphicon-th"></span>
  </div>
</div>

范围选择

将input-daterange添加到输入框组与多个子输入框一起使用将为每个输入框实例化一个选择器，以允许选择范围。

<div class="input-group input-daterange">
  <input type="text" class="form-control" value="2012-04-05">
  <div class="input-group-addon">to</div>
  <input type="text" class="form-control" value="2012-04-19">
</div>

注意：input-daterange自身并不会实现datepicker的方法，方法应该直接被输入框调用，例如：

1
2
3

$('.input-daterange input').each(function() {
    $(this).datepicker('clearDates');
});

内联或嵌入式

在简单的div上实例化datepicker将提供一个始终可见的嵌入式选择器。

1	`<div data-date="12/03/2012"></div>`

一个实例：将选择器的值的保存到隐藏的字段中。

1 2	`<div id="datepicker" data-date="12/03/2012"></div> <input type="hidden" id="my_hidden_input">`

$('#datepicker').datepicker();
$('#datepicker').on('changeDate', function() {
  $('#my_hidden_input').val(
    $('#datepicker').datepicker('getFormattedDate')
  );
});

配置选项

所有带有Date的选项都可以处理为一个Date对象。或相对于今天的时间增量，例如“ -1d”，“ + 6m + 1y”等，其中有效单位为“ d”（天），“ w”（周），“ m”（月）和“ y” “ （年）。今天使用“ 0”。相对时间增量也有别名：“昨天”等于“ -1d”，“今天”等于“ + 0d”，“明天”等于“ + 1d”。

大多数选项可以通过数据属性提供。通过以下方式可以将选项转换为数据属性：将选项中的每个大写字母替换为其小写字母，并在每个单词前加上破折号，然后在结果前添加data-date-。例如，startDate转换为data-date-start-date，format转换为data-date-format而daysOfWeekDisabled将是data-date-days-of-week-disabled。

可以在官方提供的在线DEMO中测试下面的选项。另外官方demo中的Start date和End date选项存在bug，如果直接输入会在控制台报错，并且日期选择器将失效，如果想测试可以把选项内容在别的地方写好，然后复制进去测试。

下面介绍一些常用的选项：

autoclose

assumeNearbyYear

beforeShowDay

calendarWeeks

container

datesDisabled

daysOfWeekDisabled

daysOfWeekHighlighted

defaultViewDate

enableOnReadonly

endDate

forceParse

format

immediateUpdates

keepEmptyValues

language

maxViewMode

minViewMode

multidate

multidateSeparator

orientation

startDate

startView

showWeekDays

todayBtn

todayHighlight

autoclose

weekStart

zIndexOffset

更多选项及其默认值的概述，请参见快速参考。

方法

destroy

show

update

setDate

getDate

clearDates

setDatesDisabled

setDaysOfWeekHighlighted

事件

show

hide

clearDate

changeDate

changeMonth

changeYear

changeDecade

changeCentury

其他

键盘支持

日期选择器支持使用键盘选择。在使用键盘选择时，被选择的日期会突出显示（与鼠标悬停一样）。

上，下，左，右方向键

就其本身而言，左/右将使焦点向后/向前移动一天，向上/向下将使焦点向后/向前移动一周。

配合使用Shift键，向上↑/向左←将焦点向前移动一个月，向下↓/向右→将焦点向后移动一个月。

配合使用Ctrl键，向上↑/向左←将焦点向前移动一年，向下↓/向右→将焦点向后移动一年。

Shift + Ctrl的行为与Ctrl相同，也就是说，它不会同时更改月份和年份，而只会更改年份。
Enter键

当选择器可见时，按Enter将选择焦点日期（如果有的话）。当选择器不可见时，Enter键将具有正常效果，如提交当前表单等。
当取消选择日期时，触发clearDate事件，否则触发changeDate事件。如果autoclose启用，日期选择器将在选择或取消选择后隐藏。
ESC键

ESC可用于清除焦点日期，以及隐藏并重新显示日期选择器；如果用户要手动编辑值，则必须隐藏选择器。

I18N

日期选择器支持i18n，提供不同语言的月份和周工作日名称，以及设置weekStart选项。默认语言为英语（”en”），在js/locales/目录中还提供其他可用语言的翻译，只需在插件中添加所需的语言即可。要添加更多语言，只需在调用.datepicker()之前添加一个键到$.fn.datepicker.dates。例如：

$.fn.datepicker.dates['en'] = {
    days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
    daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
    months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
    monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    today: "Today",
    clear: "Clear",
    format: "mm/dd/yyyy",
    titleFormat: "MM yyyy", /* Leverages same syntax as 'format' */
    weekStart: 0
};

['en']就是添加新语言的键，在后面大括号中添加月和周的对应语言翻译。使用时将键添加到选项中：

1
2
3

$('.datepicker').datepicker({
    language: 'XX' //XX就是键名
});

从右到左的语言添加rtl: true也可以使日历正确显示。

如果您的浏览器（或您用户的浏览器）的字符显示错误，则可能是浏览器正在加载具有非Unicode编码的javascript文件。只需添加charset="UTF-8"到您的script标签即可正常显示：

1	`<script src="bootstrap-datepicker.XX.js" charset="UTF-8"></script>`

参考链接

bootstrap中文网

bootstrap-datepicker文档

下载地址

md5在线解密破解,md5解密加密

Bootstrap

Bootstrap HTML

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处！

不能嵌套

Bootstrap-Table的基本使用教程下一篇