自定义时间

写文章的因

关于要写这篇文章的原因

• 是记录在工作上遇到的困难需求，
• 是希望能给大家提供一些解决问题的思路

接下来我描述这个需求的多样性，难点在哪。

• 勾选勾选框开始时间与结束时间默认显示昨天与今天。
• 取消勾选框开始时间与结束时间清空。
• 选择开始时间，勾选框勾选，结束时间为今天。
  在用户点击 开始时间大于或者等于结束时间时，
  提示错误信息，开始时间清空，
  选择结束时间时，小于或者等于开始时间，
  显示报错，结束时间清空。
• 选择结束时间，勾选框勾选，开始时间
  为所选结束时间的昨天。
  在用户点击结束时间小于或者等于结束时间时，
  提示错误信息，结束时间清空，
  选择开始时间时，大于或者等于开始时间，
  显示报错，开始时间清空。
• 其次在每次选择时间的时候都要计算出开始时间与结束时间。
• 用户不能选择限制范围之外的时间

1.效果演示

2.思路解析

2.1编写html

该部分比较简单，就一个错误提示div
一段文字，一个勾选框，两个时间选择框

<div id="errorMsg" style="color:red;margin-top:10px;margin-bottom:20px"></div><div><label for="select_time">自定义文件修改时间：</label><input type="checkbox" name="select_time" id='selectTime' onchange="changeStatus(event)" id="selectTime"><input type="date"  id='startTime' ref="startTime" onchange="getstartTime(event)" max=""> ---<input type="date" ref="endTime" id="endTime" onchange="getEndTime(event)" max=""></div>

2.2编写自动得到当前时间的函数

这里的难点是在日期框显示‘yyyy-mm-dd’，
就需要对获取到的值进行处理，

 function GetDateStr(AddDayCount) { var dd = new Date(); dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期 var y = dd.getFullYear(); var m = (dd.getMonth()+1);//获取当前月份的日期 var d = dd.getDate(); if(m>=10&&m>=10){return y+"-"+m+"-"+d; }else if(m<10&&d>=10){return y+"-"+'0'+m+"-"+d; }else if(m<10&&d<10){return y+"-"+'0'+m+"-"+'0'+d; } }

2.3限制用户选择日期

该功能通过给input添加一个max属性即可，
但是该max属性值必须是max='yyyy-mm-dd’的形式。

window.onload=function(){document.getElementById('startTime').setAttribute('max',this.GetDateStr(-1))document.getElementById('endTime').setAttribute('max',this.GetDateStr(0))    
}

2.4关于时间的计算

时间的计算问题，因为我们通过Date.parse（）
格式化时间得到的时间是东八区的时间，要想得到
零点的时间需要减去8个小时。
开始时间等于start=Date.parse（‘yyyy-mm-dd’)/1000-83600
结束时间等于end=Date.parse（‘yyyy-mm-dd’)/1000+163600
因为我们需要的时间是昨天的零点，以及今天的24点

  //得到时间为svar  modification_time_start=null,modification_time_end=null,modification_time_start=Date.parse(this.GetDateStr(-1)) / 1000-8*3600modification_time_end=Date.parse(this.GetDateStr(0)) / 1000+16*3600  

2.5用户选择开始时间

当用户选择开始时间，结束时间调用 GetDateStr（）并赋值。
勾选框勾选，给该元素设置属性checked为true。
然后就是对开始时间与结束时间的判断来决定
是否显示错误提示，以及清空开始框。

function getstartTime() {$('#selectTime').attr('checked',true)//给勾选框添加属性，让其处于勾选状态$('#selectTime').prop('checked',true)modification_time_start = Date.parse($('#startTime').val())/1000-8*3600// 用户只选中开始时间，结束时间默认为当前时间。并重新赋值if(count||modification_time_end===null){document.getElementById('endTime').value=this.GetDateStr(0)count=!count}if(document.getElementById('startTime').value ==='' && document.getElementById('endTime').value===''){$('#selectTime').attr('checked',false)$('#selectTime').prop('checked',false)}// document.getElementById('endTime').value=this.GetDateStr(0)document.getElementById('startTime').value=$('#startTime').val()modification_time_end= Date.parse($('#endTime').val())/1000+16*3600if(modification_time_end<=modification_time_start || $('#endTime').val()<=$('#startTime').val()){//alert('所选时间大于结束时间，请重新选择时间')document.getElementById('errorMsg').innerText='所选时间大于或等于结束时间，请重新选择时间'document.getElementById('startTime').value=''document.getElementById('endTime').value=$('#endTime').val()}else{document.getElementById('errorMsg').innerText=''}console.log('开始时间===》',modification_time_start,'结束时间===》', modification_time_end)}

2.6用户选择开始时间

当用户选择结束时间，结束时间调用 GetDateStr（）并赋值。
勾选框勾选，给该元素设置属性checked为true。
然后就是对开始时间与结束时间的判断来决定
是否显示错误提示，以及清空结束时间框。

 function getEndTime() {$('#selectTime').attr('checked',true)$('#selectTime').prop('checked',true)      modification_time_end = Date.parse($('#endTime').val())/1000+16*3600document.getElementById('endTime').value=$('#endTime').val()modification_time_start= Date.parse($('#startTime').val())/1000-8*3600if(document.getElementById('startTime').value ==='' && document.getElementById('endTime').value===''){$('#selectTime').attr('checked',false)$('#selectTime').prop('checked',false)}//当用户只选中最后时间时，开始时间应该有个默认值。该最后时间的前一天，重新给开始时间赋值 if(modification_time_end<=modification_time_start || $('#endTime').val()<=$('#startTime').val()){//alert('所选时间小于开始时间，请重新选择时间')document.getElementById('errorMsg').innerText='所选时间小于或等于开始时间，请重新选择时间'document.getElementById('endTime').value=''document.getElementById('startTime').value=$('#startTime').val()}else{document.getElementById('errorMsg').innerText=''}if(count){let date=new Date(Date.parse($('#endTime').val())-24*3600*1000)Y = date.getFullYear() + '-'M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'D = (date.getDate()< 10 ? '0'+date.getDate() : date.getDate())document.getElementById('startTime').value=Y+M+Dmodification_time_start=Date.parse(Y+M+D)/1000-8*3600count=!count}console.log('开始时间===》',modification_time_start,'结束时间===》', modification_time_end)}

2.7总结

在该需求中，我们学到了那些内容

• 计算时间的准确性（开始时间的0点，结束时间的24点）以及关于使用Date.parse（‘yyyy-mm-dd’）的值为东八区的值。
  +怎么得到当前时间，以及怎么将该值赋值到日期框中document.getElementById(‘startTime’).value=‘yyyy-mm-dd’,
• 通过jquery改变勾选框的勾选状态$(’#selectTime’).attr(‘checked’,true) $(’#selectTime’).prop(‘checked’,true)

3.完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body><div id="errorMsg" style="color:red;margin-top:10px;margin-bottom:20px"></div><div><label for="select_time">自定义文件修改时间：</label><input type="checkbox" name="select_time" id='selectTime' onchange="changeStatus(event)" id="selectTime"><input type="date"  id='startTime' ref="startTime" onchange="getstartTime(event)" max=""> ---<input type="date" ref="endTime" id="endTime" onchange="getEndTime(event)" max=""></div><script>var  modification_time_start=null,modification_time_end=null,count=truefunction GetDateStr(AddDayCount) { var dd = new Date(); dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期 var y = dd.getFullYear(); var m = (dd.getMonth()+1);//获取当前月份的日期 var d = dd.getDate(); if(m>=10&&m>=10){return y+"-"+m+"-"+d; }else if(m<10&&d>=10){return y+"-"+'0'+m+"-"+d; }else if(m<10&&d<10){return y+"-"+'0'+m+"-"+'0'+d; } }window.onload=function(){document.getElementById('startTime').setAttribute('max',this.GetDateStr(-1))document.getElementById('endTime').setAttribute('max',this.GetDateStr(0))    }function changeStatus(event) {if (event.target.checked) {modification_time_start=Date.parse(this.GetDateStr(-1)) / 1000-8*3600modification_time_end=Date.parse(this.GetDateStr(0)) / 1000+16*3600document.getElementById('startTime').value = this.GetDateStr(-1)document.getElementById('endTime').value = this.GetDateStr(0)console.log('开始时间===》',modification_time_start,'结束时间===》', modification_time_end)}else{document.getElementById('startTime').value =nulldocument.getElementById('endTime').value=nullmodification_time_end=nullmodification_time_start=null}}function getstartTime() {$('#selectTime').attr('checked',true)$('#selectTime').prop('checked',true)modification_time_start = Date.parse($('#startTime').val())/1000-8*3600// 用户只选中开始时间，结束时间默认为当前时间。并重新赋值if(count||modification_time_end===null){document.getElementById('endTime').value=this.GetDateStr(0)count=!count}if(document.getElementById('startTime').value ==='' && document.getElementById('endTime').value===''){$('#selectTime').attr('checked',false)$('#selectTime').prop('checked',false)}// document.getElementById('endTime').value=this.GetDateStr(0)document.getElementById('startTime').value=$('#startTime').val()modification_time_end= Date.parse($('#endTime').val())/1000+16*3600if(modification_time_end<=modification_time_start || $('#endTime').val()<=$('#startTime').val()){//alert('所选时间大于结束时间，请重新选择时间')document.getElementById('errorMsg').innerText='所选时间大于或等于结束时间，请重新选择时间'document.getElementById('startTime').value=''document.getElementById('endTime').value=$('#endTime').val()}else{document.getElementById('errorMsg').innerText=''}console.log('开始时间===》',modification_time_start,'结束时间===》', modification_time_end)}function getEndTime() {$('#selectTime').attr('checked',true)$('#selectTime').prop('checked',true)      modification_time_end = Date.parse($('#endTime').val())/1000+16*3600document.getElementById('endTime').value=$('#endTime').val()modification_time_start= Date.parse($('#startTime').val())/1000-8*3600if(document.getElementById('startTime').value ==='' && document.getElementById('endTime').value===''){$('#selectTime').attr('checked',false)$('#selectTime').prop('checked',false)}//当用户只选中最后时间时，开始时间应该有个默认值。该最后时间的前一天，重新给开始时间赋值 if(modification_time_end<=modification_time_start || $('#endTime').val()<=$('#startTime').val()){//alert('所选时间小于开始时间，请重新选择时间')document.getElementById('errorMsg').innerText='所选时间小于或等于开始时间，请重新选择时间'document.getElementById('endTime').value=''document.getElementById('startTime').value=$('#startTime').val()}else{document.getElementById('errorMsg').innerText=''}if(count){let date=new Date(Date.parse($('#endTime').val())-24*3600*1000)Y = date.getFullYear() + '-'M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'D = (date.getDate()< 10 ? '0'+date.getDate() : date.getDate())document.getElementById('startTime').value=Y+M+Dmodification_time_start=Date.parse(Y+M+D)/1000-8*3600count=!count}console.log('开始时间===》',modification_time_start,'结束时间===》', modification_time_end)}</script>
</body>
</html>

好了这次的文章就到这了
如果觉得还不错的话，帮忙点个关注吧
希望能给博主点赞哎🎨，评论🧶，收藏🥼三连一波加粗样式