自定義時間

寫文章的因

關于要寫這篇文章的原因

是記錄在工作上遇到的困難需求，
是希望能給大家提供一些解決問題的思路

接下來我描述這個需求的多樣性，難點在哪。

勾選勾選框開始時間與結束時間默認顯示昨天與今天。
取消勾選框開始時間與結束時間清空。
選擇開始時間，勾選框勾選，結束時間為今天。
在用戶點擊開始時間大于或者等于結束時間時，
提示錯誤信息，開始時間清空，
選擇結束時間時，小于或者等于開始時間，
顯示報錯，結束時間清空。
選擇結束時間，勾選框勾選，開始時間
為所選結束時間的昨天。
在用戶點擊結束時間小于或者等于結束時間時，
提示錯誤信息，結束時間清空，
選擇開始時間時，大于或者等于開始時間，
顯示報錯，開始時間清空。
其次在每次選擇時間的時候都要計算出開始時間與結束時間。
用戶不能選擇限制范圍之外的時間

請添加圖片描述

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>