datetimepicker设置结束时间大于开始时间，开始时间小于结束时间

最新推荐文章于 2023-05-19 18:51:52 发布

原创最新推荐文章于 2023-05-19 18:51:52 发布 · 3.8k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

methods 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了如何使用jQuery插件datetimepicker实现两个日期输入框之间的联动功能，确保结束日期不会早于开始日期。通过设置相应的参数，如日期格式、语言、最小视图等，以及监听changeDate事件来实现日期范围的有效限制。

$("#stratTime").datetimepicker({　
    format: 'yyyy-mm-dd',
    language: 'zh-CN',
    weekStart: 1,
    todayBtn: 1,//显示‘今日’按钮
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    minView: 2,  //Number, String. 默认值：0, 'hour'，日期时间选择器所能够提供的最精确的时间选择视图。
    forceParse: 0,
    autoclose: true,  
    pickerPosition:'bottom-left',
    endDate: new Date(),
    }).on('changeDate',function(ev){

        var starttime=$("#stratTime").val();
        $("#endTime").datetimepicker('setStartDate',starttime);
        $("#stratTime").datetimepicker('hide');
});

$("#endTime").datetimepicker({　
    format: 'yyyy-mm-dd',
    language: 'zh-CN',
    weekStart: 1,
    todayBtn: 1,//显示‘今日’按钮
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    minView: 2,  //Number, String. 默认值：0, 'hour'，日期时间选择器所能够提供的最精确的时间选择视图。
    forceParse: 0,
    autoclose: true,  
    pickerPosition:'bottom-left',
    endDate: new Date(),
}).on('changeDate',function(ev){
    var endtime=$("#endTime").val();
    $("#stratTime").datetimepicker('setEndDate',endtime);
    $("#endTime").datetimepicker('hide'); 
});