您的当前位置:首页正文

【laydate】layUI-laydate计算时间差

2024-11-23 来源:个人技术集锦

输入起始时间、结束时间,自动计算时间差,生成持续时间

起始时间不能晚于结束时间
结束时间不能早于开始时间

	<div class="layui-row masterMeter">
		<label class="textLabel">结束时间</label>
		<div class="layui-col-xs12 selectInput">
			<input id="jssj" name="m:djmsqkjlb:jssj" class="layui-input textInput magicalcoder-laydate" type="text" placeholder="请选择日期" maxlength="0" format="yyyy-MM-dd HH:mm:ss" datetype="datetime" mc-attr-str-type="datetime" autocomplete="off"/>
		</div>
	</div>
	<div class="layui-row masterMeter">
		<label class="textLabel">持续时间</label>
		<div class="layui-col-xs12 selectInput">
			<input name="m:djmsqkjlb:cxsj" class="layui-input textInput" type="text" maxlength="50" placeholder="请输入持续时间" autocomplete="off"/>
		</div>
	</div>
	<div class="layui-row masterMeter">
		<label class="textLabel">记录添加时间</label>
		<div class="layui-col-xs12 selectInput">
			<input name="m:djmsqkjlb:jltjsj" class="layui-input textInput magicalcoder-laydate" type="text" value="2022/9/13" placeholder="请选择日期" maxlength="0" format="yyyy-MM-dd HH:mm:ss" datetype="datetime" mc-attr-str-type="datetime" autocomplete="off"/>
		</div>
	</div>
layui.use(['laydate', 'form'], function(){
    var laydate = layui.laydate;
    var d1 = '';
    var d2 = '';
    // 自动计算时间差
    function changeTime() {
        if (d1 && d2) {
          //开始时间
        //   var date1 = new Date(d1).getTime();  火狐浏览器46版本报NaN
        //   var date2 = new Date(d2).getTime();
          var date3 = d2 - d1;   //时间差的毫秒数
          //计算出相差天数
          var days = Math.floor(date3 / (24 * 3600 * 1000))
          //计算出小时数
          var leave1 = date3 % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数
          var hours = Math.floor(leave1 / (3600 * 1000))
          //计算相差分钟数
          var leave2 = leave1 % (3600 * 1000)        //计算小时数后剩余的毫秒数
          var minutes = Math.floor(leave2 / (60 * 1000))
          //计算相差秒数
          var leave3 = leave2 % (60 * 1000)      //计算分钟数后剩余的毫秒数
          var seconds = Math.round(leave3 / 1000)
        //   console.log(days + "天 " + hours + "小时 " + minutes + "分钟 " + seconds + "秒");
          $('[name="m:djmsqkjlb:cxsj"]').val(days + "天 " + hours + "小时 " + minutes + "分钟 " + seconds + "秒");
        } else {
           $('[name="m:djmsqkjlb:cxsj"]').val("");
        }
      }
  
    var start = laydate.render({
      elem: '#qssj'
      ,type: 'datetime'
      ,done: function(value, date, endDate){
          if(value) {
              var start_date = new Date(date.year, date.month, date.date, date.hours, date.minutes, date.seconds);
              d1 = start_date.getTime();
          } else {  
          	  // 点击清空按钮触发清空
              d1 = '';
          }
          changeTime();
          end.config.min = date; //最大时间为结束时间的开始值
          end.config.min.month = date.month - 1;
      }
    });
    
    var end = laydate.render({
      elem: '#jssj'
      ,type: 'datetime'
      ,done: function(value, date, endDate){
          if(value) {
              var end_date = new Date(date.year, date.month, date.date, date.hours, date.minutes, date.seconds);
              d2 = end_date.getTime();
          } else {
          		// 点击清空按钮触发清空
              d2 = '';
          }
          changeTime();
          start.config.max = date; //最小时间为开始时间的最大值 
          start.config.max.month = date.month - 1;
      }
    });
});
显示全文