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

bootstrap-datetimepicker 的连接地址

1、html 部分css

<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>

2、jquery 部分html

一、封装函数jquery

//起始日期和结束日期的对照判断
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()));
}

二、调用bootstrap

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

3、备注ide

上面日期对照函数中的 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 ;
}
相关文章
相关标签/搜索