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