時間框封裝、和獲取
阿新 • • 發佈：2018-11-27
1、js封裝
function dateCallback(form,laydate,thisTab,defaultType){//頁面選擇時間型別，設定對應顯示時間框 form.on('select(timeType)', function(data){ $(".timeInput").hide(); if(data.value.split("_")[0] == -1){//時 $("#"+thisTab+"_date"+data.value.split("_")[0]).parent().show(); $('#'+thisTab+"_date"+data.value.split("_")[0]).attr("val",new Date().format("yyyy-MM-dd HH:00:00")); laydate.render({ elem: '#'+thisTab+"_date"+data.value.split("_")[0], theme:"#4CA6FF", type:"datetime", max:new Date().format("yyyy-MM-dd HH:mm:ss"), value:new Date().format("yyyy-MM-dd HH:00:00"), btns: ['now', 'confirm'], done:function(value, date, endDate){ $('#'+thisTab+"_date"+data.value.split("_")[0]).attr("val",value); } }); }else if(data.value.split("_")[0] == 0){//日 $("#"+thisTab+"_date"+data.value.split("_")[0]).parent().show(); $('#'+thisTab+"_date"+data.value.split("_")[0]).attr("val",new Date().format("yyyy-MM-dd")); laydate.render({ elem: '#'+thisTab+"_date"+data.value.split("_")[0], theme:"#4CA6FF", max:new Date().format("yyyy-MM-dd"), value:new Date().format("yyyy-MM-dd"), btns: ['now', 'confirm'], done:function(value, date, endDate){ $('#'+thisTab+"_date"+data.value.split("_")[0]).attr("val",value); } }); }else if(data.value.split("_")[0] == 1){//周 $("#"+thisTab+"_date"+data.value.split("_")[0]).parent().show(); $('#'+thisTab+"_date"+data.value.split("_")[0]).attr("val",new Date().format("yyyy-MM-dd")); laydate.render({ elem: '#'+thisTab+"_date"+data.value.split("_")[0], theme:"#4CA6FF", max:new Date().format("yyyy-MM-dd"), value:new Date().format("yyyy-MM-dd"), btns: ['now', 'confirm'], done:function(value, date, endDate){ $('#'+thisTab+"_date"+data.value.split("_")[0]).attr("val",value); } }); }else if(data.value.split("_")[0] == 2){//月 $("#"+thisTab+"_date"+data.value.split("_")[0]).parent().show(); $('#'+thisTab+"_date"+data.value.split("_")[0]).attr("val",new Date().format("yyyy-MM")); laydate.render({ elem: '#'+thisTab+"_date"+data.value.split("_")[0], theme:"#4CA6FF", type:"month", max:new Date().format("yyyy-MM"), value:new Date().format("yyyy-MM"), btns: ['now', 'confirm'], done:function(value, date, endDate){ $('#'+thisTab+"_date"+data.value.split("_")[0]).attr("val",value); } }); }else if(data.value.split("_")[0] == 3){//時段 $("#"+thisTab+"_dateStart"+data.value.split("_")[0]).parent().show().css("width","545px"); $("#"+thisTab+"_dateStart"+data.value.split("_")[0]).css("width","190px"); $("#"+thisTab+"_dateEnd"+data.value.split("_")[0]).css("width","190px"); $('#'+thisTab+"_dateStart"+data.value.split("_")[0]).attr("val",new Date().format("yyyy-MM-dd HH:00:00")); $('#'+thisTab+"_dateEnd"+data.value.split("_")[0]).attr("val",new Date().format("yyyy-MM-dd HH:00:00")); var start=laydate.render({ elem: '#'+thisTab+"_dateStart"+data.value.split("_")[0], theme:"#4CA6FF", type:"datetime", max:new Date().format("yyyy-MM-dd HH:mm:ss"), value:new Date().format("yyyy-MM-dd HH:00:00"), btns: ['now', 'confirm'], done:function(value, date, endDate){ $('#'+thisTab+"_dateStart"+data.value.split("_")[0]).attr("val",value); end.config.min = { year: date.year, month: date.month - 1, date: date.date, hours: date.hours, minutes: date.minutes, seconds: date.seconds } } }); var end=laydate.render({ elem: '#'+thisTab+"_dateEnd"+data.value.split("_")[0], theme:"#4CA6FF", type:"datetime", max:new Date().format("yyyy-MM-dd HH:mm:ss"), value:new Date().format("yyyy-MM-dd HH:00:00"), btns: ['now', 'confirm'], done:function(value, date, endDate){ $('#'+thisTab+"_dateEnd"+data.value.split("_")[0]).attr("val",value); start.config.max = { year: date.year, month: date.month - 1, date: date.date, hours: date.hours, minutes: date.minutes, seconds: date.seconds } } }); }else{//年 $("#"+thisTab+"_date"+data.value.split("_")[0]).parent().show(); $('#'+thisTab+"_date"+data.value.split("_")[0]).attr("val",new Date().format("yyyy")); laydate.render({ elem: '#'+thisTab+"_date"+data.value.split("_")[0], theme:"#4CA6FF", type:"year", max:new Date().format("yyyy"), value:new Date().format("yyyy"), btns: ['now', 'confirm'], done:function(value, date, endDate){ $('#'+thisTab+"_date"+data.value.split("_")[0]).attr("val",value); } }); } }); $(".timeInput").hide(); var defaultMax;var defaultValue;var defaultType_; if(defaultType == "-1"){ $("#"+thisTab+"_date-1").parent().show(); defaultType_="datetime"; defaultMax=new Date().format("yyyy-MM-dd HH:mm:ss"); defaultValue=new Date().format("yyyy-MM-dd HH:00:00"); }else if(defaultType == "0"){ $("#"+thisTab+"_date0").parent().show(); defaultType_="date"; defaultMax=new Date().format("yyyy-MM-dd"); defaultValue=new Date().format("yyyy-MM-dd"); }else if(defaultType == "1"){ $("#"+thisTab+"_date1").parent().show(); defaultType_="date"; defaultMax=new Date().format("yyyy-MM-dd"); defaultValue=new Date().format("yyyy-MM-dd"); }else if(defaultType == "2"){ $("#"+thisTab+"_date2").parent().show(); defaultType_="month"; defaultMax=new Date().format("yyyy-MM"); defaultValue=new Date().format("yyyy-MM"); }else if(defaultType == "3"){ $("#"+thisTab+"_dateStart3").parent().show().css("width","545px"); $("#"+thisTab+"_dateStart3").css("width","190px"); $("#"+thisTab+"_dateEnd3").css("width","190px"); defaultType_="datetime"; defaultMax=new Date().format("yyyy-MM-dd HH:mm:ss"); defaultValue=new Date().format("yyyy-MM-dd HH:00:00"); }else if(defaultType == "5"){ $("#"+thisTab+"_date5").parent().show(); defaultType_="year"; defaultMax=new Date().format("yyyy"); defaultValue=new Date().format("yyyy"); } if(defaultType=="3"){ laydate.render({ elem: '#'+thisTab+"_dateStart3", theme:"#4CA6FF", type:defaultType_, max:defaultMax, value:defaultValue, btns: ['now','confirm'], done:function(value, date, endDate){ $('#'+thisTab+"_dateStart3").attr("val",value); } }); $('#'+thisTab+"_dateStart3").attr("val",defaultMax); laydate.render({ elem: '#'+thisTab+"_dateEnd3", theme:"#4CA6FF", type:defaultType_, max:defaultMax, value:defaultValue, btns: ['now','confirm'], done:function(value, date, endDate){ $('#'+thisTab+"_dateEnd3").attr("val",value); } }); $('#'+thisTab+"_dateEnd3").attr("val",defaultMax); }else{ laydate.render({ elem: '#'+thisTab+"_date"+defaultType, theme:"#4CA6FF", type:defaultType_, max:defaultMax, value:defaultValue, btns: ['now','confirm'], done:function(value, date, endDate){ $('#'+thisTab+"_date"+defaultType).attr("val",value); } }); $('#'+thisTab+"_date"+defaultType).attr("val",defaultMax); } } function getElem(obj){ var dateElem; if(obj.timeTypeId == -1){//時 dateElem={ dateType:obj.timeTypeId, fromDate:$(obj.inputId).attr("val"), toDate:$(obj.inputId).attr("val") } }else if(obj.timeTypeId == 0){//日 dateElem={ dateType:obj.timeTypeId, fromDate:$(obj.inputId).attr("val")+" 00:00:00", toDate:$(obj.inputId).attr("val")+" 23:59:59" } }else if(obj.timeTypeId == 1){//周 var time=$(obj.inputId).attr("val"); var time_=new Date(Date.parse(time.replace(/-/g,"-"))); var now = new Date(time_); var nowTime = now.getTime() ; var day = now.getDay(); var oneDayLong = 24*60*60*1000 ; var MondayTime = nowTime - (day)*oneDayLong ; var SundayTime = nowTime + (6-day)*oneDayLong ; var monday = new Date(MondayTime); var sunday = new Date(SundayTime); dateElem={ dateType:obj.timeTypeId, fromDate:monday.format("yyyy-MM-dd")+" 00:00:00", toDate:sunday.format("yyyy-MM-dd")+" 23:59:59" } }else if(obj.timeTypeId == 2){//月 var time=$(obj.inputId).attr("val"); var time_=new Date(Date.parse(time.replace(/-/g,"-"))); // 獲取當前月的第一天 var start = new Date(time_); start.setDate(1); // 獲取當前月的最後一天 var date = new Date(time_); var currentMonth = date.getMonth(); var nextMonth = ++currentMonth; var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1); var oneDay = 1000 * 60 * 60 * 24; var end = new Date(nextMonthFirstDay - oneDay); dateElem={ dateType:obj.timeTypeId, fromDate:start.format("yyyy-MM-dd")+" 00:00:00", toDate:end.format("yyyy-MM-dd")+" 23:59:59" } }else if(obj.timeTypeId == 3){//時段 dateElem={ dateType:obj.timeTypeId, fromDate:$(obj.inputId[0]).attr("val"), toDate:$(obj.inputId[1]).attr("val") } }else if(obj.timeTypeId == 5){//年 dateElem={ dateType:obj.timeTypeId, fromDate:$(obj.inputId).attr("val")+"-01-01 00:00:00", toDate:$(obj.inputId).attr("val")+"-12-31 23:59:59" } } return dateElem; }
2、html （裡面的time_date0要改）
<div class='layui-form-item' id="lTop"> <div class='layui-input-inline' style='width:80px;'> <label class='layui-form-label timeTypeLabel'>時間型別：</label></div> <div class='layui-input-inline timeBox padding'> <select name='time_' lay-filter='timeType' id='time_type'> <option value='0'>日</option> <option value='2'>月</option> <option value='3'>時段</option> <option value='5'>年</option></select> </div> <div class='layui-input-inline timeInput' style='width:160px;'> <input type='text' class='layui-input' readonly id='time_date0'></div> <div class='layui-input-inline timeInput' style='width:160px;'> <input type='text' class='layui-input' readonly id='time_date2'></div> <div class='layui-input-inline timeInput sd'> <label class='layui-form-label timeTypeLabel' style='float:left;padding:6px 0;'>開始時間：</label> <input type='text' class='layui-input' readonly id='time_dateStart3'> <label class='layui-form-label timeTypeLabel' style='float:left;padding:6px 0;'>結束時間：</label> <input type='text' class='layui-input' readonly id='time_dateEnd3'></div> <div class='layui-input-inline timeInput' style='width:160px;'> <input type='text' class='layui-input' readonly id='time_date5'></div> <div class='layui-input-inline' style='margin-left:10px;'> <button class='layui-btn layui-btn-sm layui-btn-normal' id="looklineSearch">查詢</button></div> </div>
3.css
/* 日期 */ #time{overflow:hidden;position:relative;padding:5px;box-sizing:border-box;} .timeForm{padding-bottom:5px;;border-bottom:1px solid #e7e7e7;} .layui-form-item{margin:0;} .layui-input-block{margin:0} .timeBox{width:70px !important;color:#666;font-size:14px;margin-right:12px;} .layui-form-select dl dd.layui-this{background:#4CA6FF;} .timeTypeLabel{font-size:14px;color:#666;} .layui-input, .layui-select, .layui-textarea{height:32px;font-size:14px;color:#666;} .layui-form-label{padding:6px 0px;} .layui-btn-normal{background:#59C7EF;height:32px;line-height:32px;padding:0px 15px;} .timeInput{margin-right:0 !important;} .layui-form-item .layui-input-inline{margin-right:0;} .padding{padding-right:10px;} .sd{width:485px !important;} #time_dateStart3,#time_dateEnd3{width:160px !important;float:left;} .btn{width:54px !important;} /* 日期 */
4、用法
if($("#thisTab_type").val() == 3){//時間段特別處理
elem=getElem({
timeTypeId:$("#thisTab_type").val(),//時間型別框的值
inputId:["#thisTab_dateStart3","#thisTab_dateEnd3"]
});//獲取時間引數（fromDate，toDate，dataType）
}else{
elem=getElem({
timeTypeId:$("#thisTab_type").val(),//時間型別框的值
inputId:"#thisTab_date"+$("#thisTab_type").val()
});//獲取時間引數（fromDate，toDate，dataType）
}5、效果
