[jQuery] 如何為 DatePicker 加上中文化日期選項？

在 Dreamweaver CS6 X PHP超強互動網站特訓班一書的第 4 章，我們介紹了使用 jQuery 的 DatePicker 為表單中填寫日期的欄位，加入日曆式的選單，讓使用者在填入日期資料時除了可以直接用點選的方式來完成填寫動作，也讓程式設計師可以讓使用者填入的資料能符合程式中希望儲存的日期格式。不過因為 DataPicker 顯示畫面預設是英文的，要如何為這個工具中文化呢？

其實 jQuery 不愧為國際性的程式碼，針對於語系的問題當然也有考量到了，其實只要您在 JavaScript 的宣告時設定使用的區域即可完成這個任務。

我們原先加入在網頁的程式碼為：

$(function() {
	$( "#日期欄位" ).datepicker({dateFormat: 'yy-mm-dd'});
});

請先在使用前新增中文語系的設定，並將 DatePicker 的預設語系設為繁中即可完成這個任務，方式如下：

//設定中文語系
$.datepicker.regional['zh-TW']={
   dayNames:["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
   dayNamesMin:["日","一","二","三","四","五","六"],
   monthNames:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
   monthNamesShort:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
   prevText:"上月",
   nextText:"次月",
   weekHeader:"週"
};
//將預設語系設定為中文
$.datepicker.setDefaults($.datepicker.regional["zh-TW"]);
//套用到表單
$(function() {
	$( "#日期欄位" ).datepicker({dateFormat: 'yy/mm/dd'});
});

就是這麼簡單喔，推薦給有使用到的朋友試看看！

參考資訊：

http://api.jqueryui.com/datepicker/

[jQuery] 如何為 DatePicker 加上中文化日期選項？

相關書籍

發佈留言