好用的jQuery外掛datepicker(二)

2008-08-08

12453
0
jQuery
2008-11-16

使用datepicker最主要的目的就讓使用者能夠更輕鬆的選擇日期
所以datepicker如果沒有設定的彈性的話的就沒什麼用了
datepicker預設可選的年份是你目前選中的年份+-10年

使用datepicker最主要的目的就讓使用者能夠更輕鬆的選擇日期

所以datepicker如果沒有設定的彈性的話的就沒什麼用了

datepicker預設可選的年份是你目前選中的年份+-10年

cloudio就遇到專案經理說你的預設年份是系統現在的日期

而我的datepicker欄位主要是拿來讓使用者輸入生日用的

那麼這種情況+-10年且預設日期就不符合需求了

因為如果他目前要收集的資料都是落在20歲的使用者

等於他最少要點兩次下拉清單才能選到他要的年齡

所以如果我直接把可選日期加到+-20年是不是比較好選

除了+-20當做可選年份

另外如果一載入表單直接預設20年前呢？

所以就要小小的設定一下了


$(document).ready(function(e){
    $("#date").datepicker({
    dateFormat:"yy/mm/dd",
    yearRange:"-20:+20",
    defaultDate:(new Date(new Date().getFullYear()-20+"/01/01")-new Date())/(1000*60*60*24)
    });
})
</script>

現在datepicker會顯示成這樣了

預設是落在20年前的1月1號

為什麼defaultDate要給這樣的數字呢？

因為datepicker的defaultDate計算的值需要是以日為單位

如果你要預設日期是30天前你就要給-30

一年前要給-350天

以此類推...

還有一個問題就是生日不可以小與"今天"吧

如果今天是2008/07/07那使用者選取了2010/01/01怎麼辦？

很顯然這樣就收集到錯誤的資訊了

所以你可以設定最大的日期

如下


$(document).ready(function(e){
    $("#date").datepicker({
    dateFormat:"yy/mm/dd",
    yearRange:"-20:+20",
    defaultDate:(new Date(new Date().getFullYear()-30+"/01/01")-new Date())/(1000*60*60*24),
    maxDate:new Date()
    });
})

這樣就能設定最大日期了，最小日期則反之

這邊講到的defaultDate跟maxDate還有minDate

如果是用在動態網頁如asp或aspx都是可以用<%=%>讓server來處裡也可以

一樣都是看習慣啦^^

cloudio 的標籤：jQuery

回首頁