添加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());
});

结果就是,设置了开始日期为2015-07-21,结束日期只能选择2015-07-20之后的日期了。

添加bootstrap-datetimepicker日期控件的开始日期和结束日期之间的限制_第1张图片


你可能感兴趣的:(bootstrap,datetimepicker)