自定義時間
寫文章的因
關(guān)于要寫這篇文章的原因
- 是記錄在工作上遇到的困難需求，
- 是希望能給大家提供一些解決問題的思路
接下來我描述這個需求的多樣性，難點在哪。
- 勾選勾選框開始時間與結(jié)束時間默認顯示昨天與今天。
- 取消勾選框開始時間與結(jié)束時間清空。
- 選擇開始時間，勾選框勾選，結(jié)束時間為今天。
在用戶點擊 開始時間大于或者等于結(jié)束時間時，
提示錯誤信息，開始時間清空，
選擇結(jié)束時間時，小于或者等于開始時間，
顯示報錯，結(jié)束時間清空。- 選擇結(jié)束時間，勾選框勾選，開始時間
為所選結(jié)束時間的昨天。
在用戶點擊結(jié)束時間小于或者等于結(jié)束時間時，
提示錯誤信息，結(jié)束時間清空，
選擇開始時間時，大于或者等于開始時間，
顯示報錯，開始時間清空。- 其次在每次選擇時間的時候都要計算出開始時間與結(jié)束時間。
- 用戶不能選擇限制范圍之外的時間
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編寫自動得到當(dāng)前時間的函數(shù)
這里的難點是在日期框顯示‘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);//獲取當(dāng)前月份的日期
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關(guān)于時間的計算
時間的計算問題，因為我們通過Date.parse（）
格式化時間得到的時間是東八區(qū)的時間，要想得到
零點的時間需要減去8個小時。
開始時間等于start=Date.parse（‘yyyy-mm-dd’)/1000-83600
結(jié)束時間等于end=Date.parse（‘yyyy-mm-dd’)/1000+163600
因為我們需要的時間是昨天的零點，以及今天的24點
//得到時間為s
var modification_time_start=null,
modification_time_end=null,
modification_time_start=Date.parse(this.GetDateStr(-1)) / 1000-8*3600
modification_time_end=Date.parse(this.GetDateStr(0)) / 1000+16*3600
2.5用戶選擇開始時間
當(dāng)用戶選擇開始時間，結(jié)束時間調(diào)用 GetDateStr（）并賦值。
勾選框勾選，給該元素設(shè)置屬性checked為true。
然后就是對開始時間與結(jié)束時間的判斷來決定
是否顯示錯誤提示，以及清空開始框。
function getstartTime() {
$('#selectTime').attr('checked',true)//給勾選框添加屬性，讓其處于勾選狀態(tài)
$('#selectTime').prop('checked',true)
modification_time_start = Date.parse($('#startTime').val())/1000-8*3600
// 用戶只選中開始時間，結(jié)束時間默認為當(dāng)前時間。并重新賦值
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*3600
if(modification_time_end<=modification_time_start ||
$('#endTime').val()<=$('#startTime').val()){
//alert('所選時間大于結(jié)束時間，請重新選擇時間')
document.getElementById('errorMsg').innerText='所選時間大于或等于結(jié)束時間，請重新選擇時間'
document.getElementById('startTime').value=''
document.getElementById('endTime').value=$('#endTime').val()
}else{
document.getElementById('errorMsg').innerText=''
}
console.log('開始時間===》',modification_time_start,'結(jié)束時間===》', modification_time_end)
}
2.6用戶選擇開始時間
當(dāng)用戶選擇結(jié)束時間，結(jié)束時間調(diào)用 GetDateStr（）并賦值。
勾選框勾選，給該元素設(shè)置屬性checked為true。
然后就是對開始時間與結(jié)束時間的判斷來決定
是否顯示錯誤提示，以及清空結(jié)束時間框。
function getEndTime() {
$('#selectTime').attr('checked',true)
$('#selectTime').prop('checked',true)
modification_time_end = Date.parse($('#endTime').val())/1000+16*3600
document.getElementById('endTime').value=$('#endTime').val()
modification_time_start= Date.parse($('#startTime').val())/1000-8*3600
if(document.getElementById('startTime').value ==='' && document.getElementById('endTime').value===''){
$('#selectTime').attr('checked',false)
$('#selectTime').prop('checked',false)
}
//當(dāng)用戶只選中最后時間時，開始時間應(yīng)該有個默認值。該最后時間的前一天，重新給開始時間賦值
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+D
modification_time_start=Date.parse(Y+M+D)/1000-8*3600
count=!count
}
console.log('開始時間===》',modification_time_start,'結(jié)束時間===》', modification_time_end)
}
2.7總結(jié)
在該需求中，我們學(xué)到了那些內(nèi)容文章來源：http://www.zghlxwxcb.cn/news/detail-654107.html
- 計算時間的準(zhǔn)確性（開始時間的0點，結(jié)束時間的24點）以及關(guān)于使用Date.parse（‘yyyy-mm-dd’）的值為東八區(qū)的值。
+怎么得到當(dāng)前時間，以及怎么將該值賦值到日期框中document.getElementById(‘startTime’).value=‘yyyy-mm-dd’,- 通過jquery改變勾選框的勾選狀態(tài)$(’#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=true
function GetDateStr(AddDayCount) {
var dd = new Date();
dd.setDate(dd.getDate()+AddDayCount);//獲取AddDayCount天后的日期
var y = dd.getFullYear();
var m = (dd.getMonth()+1);//獲取當(dāng)前月份的日期
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*3600
modification_time_end=Date.parse(this.GetDateStr(0)) / 1000+16*3600
document.getElementById('startTime').value = this.GetDateStr(-1)
document.getElementById('endTime').value = this.GetDateStr(0)
console.log('開始時間===》',modification_time_start,'結(jié)束時間===》', modification_time_end)
}else{
document.getElementById('startTime').value =null
document.getElementById('endTime').value=null
modification_time_end=null
modification_time_start=null
}
}
function getstartTime() {
$('#selectTime').attr('checked',true)
$('#selectTime').prop('checked',true)
modification_time_start = Date.parse($('#startTime').val())/1000-8*3600
// 用戶只選中開始時間，結(jié)束時間默認為當(dāng)前時間。并重新賦值
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*3600
if(modification_time_end<=modification_time_start || $('#endTime').val()<=$('#startTime').val()){
//alert('所選時間大于結(jié)束時間，請重新選擇時間')
document.getElementById('errorMsg').innerText='所選時間大于或等于結(jié)束時間，請重新選擇時間'
document.getElementById('startTime').value=''
document.getElementById('endTime').value=$('#endTime').val()
}else{
document.getElementById('errorMsg').innerText=''
}
console.log('開始時間===》',modification_time_start,'結(jié)束時間===》', modification_time_end)
}
function getEndTime() {
$('#selectTime').attr('checked',true)
$('#selectTime').prop('checked',true)
modification_time_end = Date.parse($('#endTime').val())/1000+16*3600
document.getElementById('endTime').value=$('#endTime').val()
modification_time_start= Date.parse($('#startTime').val())/1000-8*3600
if(document.getElementById('startTime').value ==='' && document.getElementById('endTime').value===''){
$('#selectTime').attr('checked',false)
$('#selectTime').prop('checked',false)
}
//當(dāng)用戶只選中最后時間時，開始時間應(yīng)該有個默認值。該最后時間的前一天，重新給開始時間賦值
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+D
modification_time_start=Date.parse(Y+M+D)/1000-8*3600
count=!count
}
console.log('開始時間===》',modification_time_start,'結(jié)束時間===》', modification_time_end)
}
</script>
</body>
</html>
好了這次的文章就到這了
如果覺得還不錯的話，幫忙點個關(guān)注吧
希望能給博主點贊哎??，評論??，收藏??三連一波加粗樣式文章來源地址http://www.zghlxwxcb.cn/news/detail-654107.html
到了這里，關(guān)于前端練手小項目--自定義時間（html+css+js）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
