日期选择插件--bootstrap-datepicker

官网

官网: http://bootstrap-datepicker.readthedocs.io/en/latest/#

使用

• 引入

引入datepicker 的js、css之前需先引入

Bootstrap 2.0.4+
jQuery 1.7.1+

<link th:href="@{/attend/bootstrap-datepicker/css/bootstrap-datepicker3.css}" rel="stylesheet">
<script th:src="@{/attend/bootstrap-datepicker/js/bootstrap-datepicker.js}"></script>

• 使用

 <div class="input-group">
    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
    <input type="text" id="holidayAdd"  placeholder="节假日" readonly class="form-control picker">
</div>

$(".picker").datepicker({
    format: "yyyy-mm-dd", 
    todayBtn: "linked",
    language: "zh-CN",
    orientation: "auto",//日期控件显示位置
    startView:"days",//默认显示视图：months、years、centuries，可选
    minViewMode:"months",//最小显示视图
    keyboardNavigation: false,
    autoclose: true,
    todayHighlight: true
});

• 时间范围联动

用到 changeDate 事件和setStartDate、setEndDate方法

$("#startDate").datepicker().on("changeDate", function (e) {
     if(e.date){
        $("#endDate").datepicker('setStartDate', new Date(e.date.valueOf()))
    }else{
        $("#endDate").datepicker('setStartDate',null);
    }    
});
$("#endDate").datepicker().on("changeDate", function (e) {
    if(e.date){
        $("#startDate").datepicker('setEndDate', new Date(e.date.valueOf()))
    }else{
        $("#startDate").datepicker('setEndDate',new Date());
    }
});