JQuery的datetimepicker插件,起始日期&结束日期相互约束

bootstrap-datetimepicker 的链接地址

一、html 部分

<div class="row">
    <div class="col-md-3 col-sm-3 col-xs-6 ">
        <input type="text" class="form-control" id="dateFrom" placeholder="开始日期"  value="" />
    </div>
    <div class="col-md-3 col-sm-3 col-xs-6 ">
        <input type="text" class="form-control" id="dateTo" placeholder="结束日期"  value="" />
    </div>
</div>

二、jquery 部分

1、封装函数

//起始日期和结束日期的对照判断
function dateControl(objStart,objEnd){
    var starttime,endtime;
    objStart.datetimepicker({
        minView:2, //选择日期后，不会再跳转去选择时分秒
        format: 'yyyy-mm-dd', //日期格式
        language:'zh-CN', //汉化
        autoclose:true, //选择日期后自动关闭
        top:'top-left',
    }).on("changeDate",function(ev){
        starttime=objStart.val();
        objEnd.datetimepicker('setStartDate',starttime);  //end 的开始日期
        objStart.datetimepicker('hide');
    });
    objStart.datetimepicker('setEndDate',getLocalTime(new Date()));
    
    objEnd.datetimepicker({
        minView:2, //选择日期后，不会再跳转去选择时分秒
        format: 'yyyy-mm-dd', //日期格式
        language:'zh-CN', //汉化
        autoclose:true, //选择日期后自动关闭
        top:'top-left',
    }).on("changeDate",function(ev){
        starttime=objStart.val();
        endtime=objEnd.val();
        if(starttime!=""&&endtime!=""){
            if(starttime>endtime){
                objEnd.val("");
                swal("开始时间大于结束时间！");
                return;
            }
        }
        objStart.datetimepicker('setEndDate',endtime);   //start 的结束日期
        objEnd.datetimepicker('hide');
    });
    objEnd.datetimepicker('setEndDate',getLocalTime(new Date()));
}

2、调用

dateControl($('#dateFrom'),$("#dateTo"));

三、备注

上面日期对照函数中的 getLocalTime()函数是之前封装的转换日期格式的函数，如下：

//可以将把时间戳转为普通格式
function getLocalTime(now) {
    now = new Date(now);
    var year = now.getFullYear();
    var month = now.getMonth() + 1;
    var date = now.getDate();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    if(month<10){
        month="0"+month;
    }
    return year + "-" + month + "-" + date ;
}