1. 程式人生 > >Bootstrap時間控制元件 datetimepicker

Bootstrap時間控制元件 datetimepicker

作為一個日期選擇控制元件,當涉及到同時選擇開始日期和結束日期時,兩者的日期時間值之間是存在一定的約束條件的,即保證任何情況下開始日期要小於結束日期。

控制元件效果如下:

預設情況下,開始日期和結束日期之間是不存在關聯的,需要我們進行設定。

//日期時間選擇器
$("#datetimeStart").datetimepicker({
    format: "yyyy-mm-dd",
    autoclose: true,
    minView: "month",
    maxView: "decade",
    todayBtn: true,
    pickerPosition: "bottom-left"
}).on("click",function(ev){
    $("#datetimeStart").datetimepicker("setEndDate", $("#datetimeEnd").val());
});
$("#datetimeEnd").datetimepicker({
    format: "yyyy-mm-dd",
    autoclose: true,
    minView: "month",
    maxView: "decade",
    todayBtn: true,
    pickerPosition: "bottom-left"
}).on("click", function (ev) {
    $("#datetimeEnd").datetimepicker("setStartDate", $("#datetimeStart").val());
});