时间框封装、和获取

妖狐艹你老母 2022-05-14 14:04 210阅读 0赞

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、效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_27_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Nzg0NjI4_size_27_color_FFFFFF_t_70]: /images/20220504/6c4494854b164f8e84cb2eb61dc50c8c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，210人围观）

还没有评论，来说两句吧...

相关阅读

相关数据库获取时间和显示时间不一致

数据库格式: ![在这里插入图片描述][2019111311394756.png] 显示格式: ![在这里插入图片描述][watermark_type_ZmFuZ3p

心已赠人/ 2023年06月12日 14:30/ 0 赞/ 25 阅读

相关时间封装

var t = null; t = setTimeout(time, 1000); //開始运行 function time() {

Myth丶恋晨/ 2022年12月22日 04:53/ 0 赞/ 163 阅读

相关 js 封装获取时间的方法

项目开发中经常会用到的js获取时间的方法比如时间转成日期格式 timeConvert(timestamp,num){//num:0 YYYY-MM-DD num

「爱情、让人受尽委屈。」/ 2022年12月16日 12:00/ 0 赞/ 159 阅读

相关获取时间

Java获取系统时间 Date day=new Date(); SimpleDateFormat df = new SimpleDateFormat("yyyy

蔚落/ 2022年06月01日 14:10/ 0 赞/ 278 阅读

相关 js获取日期和时间

[Js获取当前日期时间及其它操作][Js] var myDate = new Date(); myDate.getYear(); //获取当前年份(2位

桃扇骨/ 2022年05月24日 13:51/ 0 赞/ 474 阅读

相关时间框封装、和获取

1、js封装 function dateCallback(form,laydate,thisTab,defaultType){//页面选择时间类型，设置对应显示时间框

妖狐艹你老母/ 2022年05月14日 14:04/ 0 赞/ 211 阅读

相关时间格式化封装、ajax封装

1、时间格式化 Date.prototype.format=function(pattern){//日期格式化 var returnValue=patter

旧城等待，/ 2022年05月14日 14:04/ 0 赞/ 241 阅读

相关日期时间选择框

日期时间选择框: 1) jsp 部分: <div class="form-group"> <label for="dtp_input1"

川长思鸟来/ 2022年05月13日 13:00/ 0 赞/ 295 阅读

相关获取本地化日期和时间

一代码 1. `<?php` 2. `setlocale(LC_ALL,"en_US");//设置为美国本地环境` 3. `echo "美国格式：".strftime

逃离我推掉我的手/ 2022年05月11日 23:12/ 0 赞/ 348 阅读

相关 moment获取自然时间和近期时间

moment：JavaScript 日期处理类库，主要用于处理日期、时间，可以进行所需要的日期格式化，也可以按所需获取相应的时间。此次我们来简单介绍下在vue项目使用mom

系统管理员/ 2021年09月01日 08:10/ 0 赞/ 771 阅读