laydate 時間插件實現開始日期與結束日期控制在一定範圍內

2020-12-13 果果奇談

主要實現功能:

採集時間分為開始時間與結束時間,需限定時間段內數據在一年以內超過一年不允許進行選擇;

實現代碼及步驟:

1.首先考慮開始實現需要限定的時間,如果超出一年則不允許選擇,若結束時間向前推移一個月此時開始時間也需要向前推一個月;

2.結束時間需要控制在當前時間範圍內,如果修改時間需要將值付給開始時間限定的當前時間,將之前獲取的時間進行置換;

3.最終實現效果,選擇好結束時間後需要根據時間推斷開始時間是否在限制範圍內,若在限制範圍內則允許選擇,若不在限制範圍內則不允許選擇

實現代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Layui</title>

<meta name="renderer" content="webkit">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<link rel="stylesheet" href="./frame/layui/css/layui.css" media="all">

<!-- 注意:如果你直接複製所有代碼到本地,上述css路徑需要改成你本地的 -->

</head>

<body>

<fieldset style="margin-top: 30px;">

<legend>時間選擇器</legend>

</fieldset>

<div>

<div>

<div>

<label>開始時間</label>

<div>

<input type="text" id="startTime" placeholder="yyyy-MM-dd HH:mm:ss">

</div>

</div>

<label>結束時間</label>

<input type="text" id="endTime" placeholder="yyyy-MM-dd HH:mm:ss">

</div>

</div>

</div>

<script src="./frame/layui/layui.js" charset="utf-8"></script>

<!-- 注意:如果你直接複製所有代碼到本地,上述js路徑需要改成你本地的 -->

<script>

layui.use('laydate', function(){

var laydate = layui.laydate;

//當前時間

var nowTime = getNowFormatDate();

//日期時間選擇器

var startDate = laydate.render({

elem: '#startTime'

,type: 'datetime'

});

var endDate = laydate.render({

elem: '#endTime'

,type: 'datetime'

,max: getNowDate()

,done:function(value,date,endDate){

startDate.config.min = getDateArray(date);//重點修改時間插件代碼

}

})

//當前時間

function getNowDate(){

var nowDate = new Date();

var year = nowDate.getFullYear();

var month = (nowDate.getMonth()+1)<10?'0'+ (nowDate.getMonth()+1):(nowDate.getMonth()+1);

var day = (nowDate.getDate())<10?('0'+nowDate.getDate()):(nowDate.getDate());

return year+"-"+month+"-"+day+" 23:59:59";

}

function getDateArray(date){//獲取時間數組

var darray={};

darray.year=date.year-1;

darray.month=date.month - 1;

var day=date.date;

if(date.hours == 23 && date.minutes == 59 && date.seconds == 59){

day = day + 1;

}else{

darray.hours = date.hours;

darray.minutes = date.minutes;

darray.seconds = date.seconds;

}

darray.date=day;

return darray;

});

</script>

</body>

</html>

相關焦點

  • 基礎知識 | 日期時間的識別
    碰到這些時控制項時,需要我們準確讀取部件上標識的時間。各個地區和國家表示時間的方法有差異,而航材的製造商分布全球,給我們的日期時間識讀帶來了困難,時不時會有人因看錯了日期時間而受處罰的。下面簡單介紹一下這方面的知識。
  • 手機拍照怎麼顯示日期時間?手機拍照顯示日期時間方法-太平洋IT百科手機版
    朋友圈裡常常有人曬照片,可以發現有些人的照片上有拍攝的時間,而自己的手機拍攝照片卻沒有這一功能。沒有這一功能的人想要知道這一功能如何設置,因為手機拍照顯示日期時間能幫助大家更好地記住美好的回憶。那麼,手機拍照怎麼顯示日期時間呢?
  • 基礎知識 | 飛機時控制項日期時間識別
    星期日曆表示法可以用2位數表示年內第幾個日曆星期,再加上一位數表示日曆星期內第幾天,但日曆星期前要加上一個大寫字母W,如2004年5月3日可寫成2004-W19-1或2004W191。但2005-W011是從2005年1月3日開始的,前幾天屬於上年的第53個日曆星期。每個日曆星期從星期一開始,星期日為第7天。
  • 日期與時間計算
    1.推算時間和日期時間+90分鐘,其中90分鐘是數字格式,直接是時間+90/24/60,可換算成分鐘,同樣的時間的分鐘轉換成整數,要*24*60即:分鐘變成整數,用乘;整數變成分鐘,用除日期的話直接相加相減即可日期間隔月份算結束日期=date(year(B5),month(B5)+C5,day(B5))年是原來日期的年,月是原來日期的月加間隔月份,天是原來日期的天有一個開始日期,求當月最後一天思路:每個月第一天我知道
  • xk-time 1.1.0 發布,Java 時間工具包,增加模糊解析日期功能
    3.日期計算工具類 DateTimeCalculatorUtil包括:(1)獲取時間屬性方法,get* 比如getYear(Date date) 獲取年部分,getMonthCnLong(Date date)獲取月份中文,getDayOfWeekCn(Date date),獲取星期中文。
  • excel中如何計算日期差值,用DATEDIF即可搞定,只不過他被隱藏了
    計算兩個日期之差,你是怎麼做的呢?我想很多人都是用大日期減去小日期,我們這樣做得的是兩個日期的天數之差,想要精確的獲得年份月份之差用這種方法顯示是不行的,那麼excel中好像也沒有專門用於計算兩個日期之差的函數啊。
  • 「EXP.」表示化妝品的最晚開啟日期?
    原標題:「EXP.」表示化妝品的最晚開啟日期? 中國寧波網訊(東南商報 通訊員壽謙)今年5月,張小姐在一家知名化妝品店購買了一套護膚品,並獲贈4件其他化妝品。回家仔細查看後張小姐發現,4件贈品上標註的「EXP.」均為2015年7月。
  • 文本與日期、時間格式之間的轉換技巧,簡單易懂,辦公必備
    Excel的數據格式分為常規、數字、貨幣、短日期、長日期、時間、百分比、分數、文本等多種類型,各種類型之間基本上都是可以相互轉換的,但必須掌握一定的技巧,例如文本與日期、時間格式之間的轉換,必須要用到Datevalue等函數。
  • 4種方法實現單元格內容變化智能錄入當前日期和時間
    Ctrl+; 快速錄入當前系統日期Ctrl+Shift+; 快速錄入當前系統時間這種方法比較適合錄入一兩條當前日期/時間,請看演示:如果記不住快捷鍵,類似的方法也可以使用輸入法中自帶的日期時間進行錄入。
  • Excel VBA之日期篇 4.2重要日程提醒 讓你不再手忙腳亂
    前景提要昨天和大家分享了計算日期之間的差距的方法,相信能夠在一定的程度上幫助廣大HR工作者在時間計算上面的問題,今天我們繼續前進,日期之間的差距實際上就是日期之間的減法,那麼有減法自然會有加法了,今天我們就來說說日期之間的加法,日期之間的加法又是什麼呢?
  • 「EXP.」表示化妝品的最晚開啟日期?你別騙我!
    「店員答覆說,EXP.表示化妝品的最晚開啟日期,開啟後還能用一年。」張小姐說,她對此很疑惑。   「EXP.是expiry date的縮寫,中文意思為限期使用期限,也就是我們日常所理解的商品有效期的截止日期。」據相關專業人士解釋說,根據規定,化妝品的有效期可以用兩種形式表示,一種是生產日期加保質期,另一種是生產批號加限期使用日期。
  • 關於日期的經典SQL編程問題:生日問題
    【IT168 技術】與日期相關的第一個問題是根據某個用戶的出生日期和當前日期,計算他最近的生日。通過對這個問題的處理,演示如何通過使用日期函數來正確處理閏月。  在生日問題中,一般對閏月的處理如下:如果是閏月,那麼返回2月28日;如果不是閏月,則返回3月1日(大部分是出於法律的要求)。
  • 手錶什麼時候不能調日期?手錶調時間日期的注意事項
    千萬注意不要在晚上9點至凌晨3點調校日曆,此時間段內,變更日曆的齒輪開始相互咬合,如果冒然以手動的方式調校日曆的話,很有可能造成齒輪損壞或是錯 位。當然,對於沒有晝夜顯示的腕錶來說,無法分辨早上9點與晚上9點,不同型號的機芯,這個時間段的範圍也會有細微的不同。
  • 第二次世界大戰結束日期改了?
    俄羅斯國家杜馬(議會下院)14日通過更改第二次世界大戰結束日期的法案,將二戰結束日期由9月2日改為9月3日。法案提議者參考了1945年蘇聯最高蘇維埃主席團發布的法令,法令宣布9月3日為戰勝日本勝利日,在當時約180萬人獲得的戰勝日本獎章背面顯示的日期為1945年9月3日。
  • Excel中,日期和時間怎麼計算?教你10個方法,不再求人
    非常簡單,在C2單元格把日期和時間相加:=A2+B2再雙擊填充公式,輕鬆完成日期和時間的合併二、拆分日期和時間有合就有分,如何把日期和時間拆分開呢?計算兩個日期之間相差幾天,用結束日期減開始日期即可得出天數:=B2-B1四、計算間隔幾小時計算兩個日期之間相差幾小時,用結束日期減開始日期,得出的天數再乘24即可:=(B2-B1)*24五、計算間隔幾分鐘
  • 計算機中的時間與日期
    計算機語言時間戳是以1970年1月1日0點為計時起點時間的。計算機誕生為1946年2月14日,而賦予生命力時間是從1970年1月1日0點開始。而中國研發使用計算機是1956年。中國時間和國外的時間的時間戳都一樣,但時區不同,導致時間也會不同。
  • 2021年初中英語場景話題:時間與日期
    中考網整理了關於2021年初中英語場景話題:時間與日期,希望對同學們有所幫助,僅供參考。   1) 經典例句   1.—When were you born?你什麼時候出生的?   —I was born on August 17th ,1978.我出生於 1978 年 8 月 17 日。
  • 怎樣調機械錶日期及時間?
    這兩款機械的動力來源皆是靠機芯內的發條為動力,帶動齒輪進而推動錶針,只是動力來源的方式有異。手上發條的機械錶是依靠手作動力,機芯的厚度較一般自動上發條的表薄一些,相對來說手錶的重量就輕。而自動上煉的手錶,是利用機芯的自動旋轉盤左右擺動產生動力來驅動發條的,但相對來講手錶的厚度要比手上發條的表大一些。
  • excel數字結構解析:日期和時間的自動識別規則
    不知道大家有沒有發現這麼一個現象,在excel中輸入一下不太完整的日期或時間,依然能被excel自動識別出來。比如在excel中輸入「19-12-1」,excel會自動顯示「2019/12/1」。那在excel中,識別日期和時間的規則還有哪些呢?我們一起來看看吧!
  • 號外:披露了2019-2020賽季開始和結束的日期
    由於新冠肺炎疫情,NBA從3月中旬開始暫停了2019- 2020賽季。據報導,NBA將投票表決一項提案,確定賽季最後一天和季後賽的具體日期。NBA聯盟將於7月31日恢復比賽,如果有必要的話,2020年NBA總決賽的第七場比賽將於2020年10月12日舉行,正式結束停賽的賽季。(據消息人士透露,NBA理事會將於周四召開會議,就重新開始新賽季的最終計劃進行投票。聯盟仍在與NBPA協商這些細節。