双日历日期选择控件

近期，需要在项目里使用日历，经过多方选择，最后决定使用 daterangepicker （http://www.daterangepicker.com），代码下载地址 https://github.com/dangrossman/bootstrap-daterangepicker

但是，该控件是一个日期范围选择控件，使用singleDatePicker 可以变成单日期选择控件，但是只显示一个日期。

看了一下源代码，主要是在 daterangepicker.js 的有一段代码，注释掉即可：如下

if (this.singleDatePicker) {

// this.container.addClass('single');
// this.container.find('.calendar.left').addClass('single');
//this.container.find('.calendar.left').show();
// this.container.find('.calendar.right').show();
this.container.find('.daterangepicker_input input, .daterangepicker_input i').hide();
//if (!this.timePicker) {
//   this.container.find('.ranges').hide();
//}
}

test.html页面为

<input type="text" id="demo"/>

<script>

$('#demo').daterangepicker({
"singleDatePicker": true,
"autoApply": true,
"locale": {
"format": "YYYY-MM-DD",
"separator": "-",
"applyLabel": "Apply",
"cancelLabel": "Cancel",
"fromLabel": "From",
"toLabel": "To",
"customRangeLabel": "Custom",
"daysOfWeek": [
"日",
"一",
"二",
"三",
"四",
"五",
"六"
],
"monthNames": [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月"
],
"firstDay":1
}
} );

</script>

运行效果如下：



所有代码下载地址 http://files.cnblogs.com/files/mqingqing123/bootstrap-daterangepicker-master.rar
运行 test.html即可