用javascript做下拉式日期選單

前兩週是坎尼爆肝週 晚上回去大多是該睡覺的時間 orz
發現已經積了不少篇文章 可是卻沒時間可以講 囧>
(而且坎尼的電腦灌 Vista 64 一直抓不到驅動 怒

---

今天來講個老梗吧
如何用 javascript 做下拉式日期選單

首先要了解月份的算法 1月大 2月小 3月大...... 相信大家幼稚園都有背過這個
不過這之間的例外就是2月 它每四年就會多一天 (也就是閏年
閏年的算法為 西元年 可被 4 或 400 整除 但不被 100 整除
(想當年 坎尼和Tim的計概期末考是考這個 囧興

直接來看抓圖吧


首先在頁面上佈置三個 DropDownList (當然也可以用 select 來做
重點是要給它們一個 id 並把 id 傳入待會要講的 javascript function 中
這邊 onload 事件是初始時 判斷月份的天數
若後端在初始化時已經做完 這邊有沒有加入事件倒是沒啥差


後端初始化下拉選單的選項 並將選擇日期預設為今日

接著三張為 javascript 同一個 function
可以看到 function 要分別傳入 年 月 日 的下拉選單 id
這邊是為了較有彈性而設計 以免換頁面 id 不同 又要開.js 檔出來改
另外 create 三個 option 是用來增減天數選項 (因為會變的只有 29 30 31)

由上圖可以看到 若是為閏年
日期的下拉選單會加入 29 的option
反之 將 index 28 移除 (也就是第29個項目)

下面兩張同理 所以就跳過



突然發現 好像講完了 orz
.js 請到 這邊 下載

用下拉選單的好處就是 可以在三個動作就到達要選的日期
壞處就是.....它一定至少要三個動作 (日期不同的話)
然後一般以表格化的月曆 (也就是和 .net 的 calendar 長很像的那種)
缺點是 若是要點 1960 年的日期 可能要點上一年點到死掉 XD
但優點就是很直觀 所以網路上已有人將兩種方式結合起來

最後再提一下 AJAX Control Toolkit 的 CalendarExtend 就是這種
不過動作只要把 Extender 拉到畫面上 然後指定 TargetID就好
真是好用又簡單啊