日期選擇插件--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());
    }
});
複製代碼