DEMO :
現在時間 :
請輸入時間 : (格式yyyy/MM/dd)
~
請輸入時間 : (格式yyyy/MM/dd)
Message :
為了呈現這些程式碼讓我花了快一個多小時呢... 還順便把整個版面都改掉了, 反正Plurk 跟ReadMore 好像根本沒在用XDD , 好啦... 好像有點用 ... 之後要不要加回來呢...(望
先來HTML, 沒啥特別的.
HTML 程式碼 :
<div id="jQueryCheckDate" align="center"> <div class="demoArea"> <div id="infomation" class="box"> 現在時間 : <span></span><br /><br /> 請輸入時間 : (格式yyyy/MM/dd) </div> <input type="text" name="dtMap(fromDay)" value="2012/12/21" maxlength="10"/> ~ <input type="text" name="dtMap(endDay)" value="2012/12/30" maxlength="10"/> <div id="Message" class="box"><br />Message : <br /><span></span></div> </div> </div>
CSS 程式碼:
#jQueryCheckDate .demoArea{ background-color:rgba(224,224,224,0.6); border-radius:15px; padding:20px; width:310px; height:140px; text-align:left; }JavaScript 分兩部分,第一部分是初始化$(function(){})跟blur事件, 比較要注意的點就是我利用了jQuery Selector 的*= 來完成兩個日期輸入框只用一段程式碼XD, 用了this 來抓取目前blur的到底是哪個輸入框,這算是比較小偷懶的方式(?), 正常好像要用event.currentTarget來比較比較好XD
$(function(){ date = new Date(); var today = date.getFullYear()+"/"+(date.getMonth()+1)+"/"+date.getDate(); $('#jQueryCheckDate #infomation span').append(today); $('#jQueryCheckDate [name*=dt]').blur(function(){ var errors =""; var fromDay = $('#jQueryCheckDate [name=dtMap(fromDay)]').val(); var endDay = $('#jQueryCheckDate [name=dtMap(endDay)]').val(); if($(this).val()!=""){ if(checkDate(fromDay) && checkDate(endDay)){ //時間格式對了才來判斷跟另外一個日期的關係 if(parseInt(fromDay.replace(/[\/]/g,""))>parseInt(endDay.replace(/[\/]/g,""))){ errors = $(this).val()==fromDay ? "起始日"+fromDay+"大於迄止日"+endDay : errors = "迄止日"+endDay+"小於起始日"+fromDay; }else if(parseInt(endDay.replace(/[\/]/g,""))-parseInt(fromDay.replace(/[\/]/g,""))>10000){ errors = "起始日"+fromDay+"和迄止日"+endDay+"相差一年"; }else{ if(parseInt(fromDay.replace(/[\/]/g,""))>parseInt(today.replace(/[\/]/g,"")) || parseInt(endDay.replace(/[\/]/g,""))<parseInt(today.replace(/[\/]/g,""))){ errors = "輸入的日期不包含今天!"; }else{ errors = "輸入的日期包含今天!"; } } }else{ errors = "時間格式錯誤!"; } } $('#jQueryCheckDate #Message span').html(errors); }); });第二段JavaScript 負責檢查日期有無錯誤, 這邊的重點則是用到了正規表示式 , 一開始看到文件真的會有種想說這O小叮噹的感覺...不過在一個早上的嘗試之後也漸漸的瞭解這東西在做什麼了, 首先要感謝 這篇 , 真的超有用的 !
另外這篇則是附上了正規表示式的格式 , 舉個最好的例子, replace取代字串中的字的時候,用單純字串下去比較會只取代他找到的第一個字, 這時候用正規表示式來做比較 , 就可以達到全部取代的功用唷~只要在最後面加上g就好了!
然後用()包起來搭配 | 就可以達到更加強大的效果唷 /^([0][13578])|([1][12])$/
這段就是判斷是否是 01 03 05 07 08 或是 11 12 ~ 可以省下陣列去比較呢~
function checkDate(dateString){ //重點 如果沒有用^開頭跟結尾$就不會是完全比對,而會是模糊比對了,另外\/要用[]隔起來XD if(/^\d{4}[\/]\d{2}[\/]\d{2}$/.test(dateString)){ var temp = dateString.split("/"); if(parseInt(temp[1],10)<13 && parseInt(temp[1],10)>0){ if(/^([0][13578])|([1][12])$/.test(temp[1]))){ if(parseInt(temp[2],10)==0 || parseInt(temp[2],10)>31){ return false; } }else{ if(/^02$/.test(temp[1])){ if(parseInt(temp[0],10)%4==0){ if(parseInt(temp[2],10)==0 || parseInt(temp[2],10)>29){ return false; } }else { if(parseInt(temp[2],10)==0 || parseInt(temp[2],10)>28){ return false; } } }else { if(parseInt(temp[2],10)==0 || parseInt(temp[2],10)>30){ return false; } } } return true; }else{ return false; } }else{ return false; } }
0 意見:
張貼留言