本文将介绍一款 基于Bootstrap 的简洁的日期插件bootstrap-datepicker.js。
该插件需要单独下载。包括如下文件：
datepicker.css
bootstrap-datepicker.js
datepicker.less
less文件可根据需要使用。下面我们就将这个插件的使用详细介绍下。
引入文件
<link href="http://www.see-source.com/bootstrap/css/bootstrap.css" rel="stylesheet"> <script src="http://www.see-source.com/bootstrap/js/jquery.js" type="text/javascript"></script> <link href="http://www.see-source.com/bootstrap/js/datepicker/css/datepicker.css" rel="stylesheet"> <script src="http://www.see-source.com/bootstrap/js/datepicker/js/bootstrap-datepicker.js" type="text/javascript"></script>
该插件是基于Bootstrap的扩展插件，所以依赖Bootstrap的样式，需要引入bootstrap.css
入门实例
Html代码
<input type="text" value="05/20/2013" id="dp1">Js代码
<script type="text/javascript">
$('#dp1').datepicker();
</script>
该插件并没有提供标记创建，必须通过js手工创建。可通过$().datepicker()语句为文本框绑定datepicker插件。文本框的value属性值为日期初始值，日期默认格式为'mm/dd/yyyy'，如果未指定value值，将采用当前日期。
参数
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| format | string | 'mm/dd/yyyy' | 设置日期格式 |
| weekStart | integer | 0 | 设置一个星期的第一天. 0 代表周日 - 6 代表周六 |
| viewMode | string|integer | 0 = 'days' | 设置初始视图模式，可选项: 'days', 'months', 'years'。也可分别用 0 , 1, 2代表。 |
| minViewMode | string|integer | 0 = 'days' |
设置最小视图模式，可选项: 'days', 'months', 'years'。也可分别用 0 , 1, 2代表。 |
年份视图
月份视图
日视图
在年份视图中显示年份列表，可以选择某一年份，单击(选择)某一年份后可跳转到月份视图，单击某一月份后又可跳转到日视图，由此来选择年月日。所以视图是有大小级别的，最大是年份视图，最小是日视图。
通过参数viewMode可以设置最大视图(也可叫初始视图)，minViewMode设置最小视图。默认情况下，最大视图和最小视图都是日视图。
如何使用参数
有俩种方法进行设置参数：标记 和 js对象 .
1.使用标记设置
在参数名前加前缀"data-date-"后作为dom元素属性。如：data-date-format="dd-mm-yyyy"。
demo：
Html代码
<input type="text" id="dp1" value="20-05-2013" data-date-format="dd-mm-yyyy" data-date-viewMode="1" data-date-minViewMode="0" data-date-weekStart="1">Js代码
<script type="text/javascript">
$('#dp1').datepicker();
</script>
设置最大视图为月份视图，最小视图为日视图。同时设置了一个星期的第一天为星期一。
2.使用js设置
在$().datepicker()创建时，可以传进个对象参数，通过对象的属性设置。如下：
Html代码
<input type="text" id="dp1" value="20-05-2013" >Js代码
<script type="text/javascript">
$('#dp1').datepicker({format:"dd-mm-yyyy",weekStart:1});
</script>
命令(方法)
另外，插件还提供了如下的几个命令，利用这些命令我们可以通过js对插件进行控制：
.datepicker('show')
打开
.datepicker('hide')
关闭
.datepicker('setValue', value)
设置日期
Html代码
<input type="text" id="dp1" value="20-05-2013" > <a href="javascript:void(0)" onClick="open_datepicker()">显示</a>/ <a href="javascript:void(0)" onClick="hide_datepicker()">隐藏</a>/ <a href="javascript:void(0)" onClick="set_datepicker()">设值</a>Js代码
<script type="text/javascript">
$('#dp1').datepicker({format:"dd-mm-yyyy"});
//打开插件
function open_datepicker(){
$('#dp1').datepicker("show");
}
//关闭插件
function hide_datepicker(){
$('#dp1').datepicker("hide");
}
//手工赋值
function set_datepicker(){
$('#dp1').datepicker("setValue", "24-05-2013");
}
</script>
事件
和其他插件一样，对事件的监听是少不了的。一般情况下我们可能用不到事件，只需要获得日期值即可，如果要完成复杂的功能，这些事件就要派上用场。
| 事件 | 描述 |
|---|---|
| show | 当插件被打开时，该事件被立即触发 |
| hide | 和show事件对应。当插件关闭时，该事件被立即触发 |
| changeDate | 当日期被修改时，该事件被立即触发 |
| onRender | 用于插件每一次被渲染时触发。有俩个返回值："disabled"、""。默认返回""; |
onRender事件用于控制日期的可选范围。当插件每次生成视图或渲染时，对于当前视图中的每个日期都会调用onRender事件，如果事件返回"",则该日期可选，如果返回"disabled",该日期不可选，相应的按钮会呈现灰色(不可选状态)。
另外注意，对于changeDate事件，并非是日期值被改变时才被触发，只要我们单击选择日期的按钮，不管日期是否改变，该事件都会触发。对于onRender事件，不能作为事件设置，需要作为参数设置，下面示例中将会看到如何使用。
Html代码
<input type="text" id="dp1" value="20-05-2013" data-date-format="dd-mm-yyyy">js代码
<script type="text/javascript">
$('#dp1').datepicker({"onRender": function(date){//添加onRender事件，控制用户只能选择大于当前日期的
var current = new Date();//获得当前日期
if(date.valueOf() <= current){//判断日期是否大于当前日期
return "disabled";
}
return "";
}}
);
//添加show事件
//$('#dp1').on("show", function(ev){
// alert("show事件被触发，当前日期："+ ev.date.toString());
// }
//);
//添加changeDate事件
//$('#dp1').on("changeDate", function(ev){
// alert("changeDate事件被触发，当前日期："+ ev.date.toString());
// }
//);
</script>
创建自定义日期组件
datepicker插件除了可以对一个文本框进行绑定外，还提供了可对我们自定义的任何组件进行绑定。
Html代码
<div class="input-append date" id="dp2" data-date="12-02-2012" data-date-format="dd-mm-yyyy"> <input class="span2" size="16" type="text" value="12-02-2012"> <span class="add-on"><i class="icon-th"></i></span> </div>Js代码
$('#dp2').datepicker();
如上代码，对我们自定义的一个div元素进行绑定。对于这样的绑定必须具备俩个条件：
1.绑定的元素必须有.date 样式
2.打开或隐藏插件的元素必须有.add-on样式。
具备上面俩个条件后，对于组件内的每个文本框，都会被绑定为日期插件。
设置只读
对于上面的所有示例我们可以发现，如果在文本框中直接输入日期也是可以的，并且会自动与插件的日期保持同步。有时，这种情况是不允许的，如：避免用户输入非法格式的日期或不符合可选范围的日期等。我们可以给文本框设置只读属性readonly。
input type="text" readonly id="dp1" value="20-05-2013" data-date-format="dd-mm-yyyy" >