出自：http://www.aimks.com/method-to-display-the-jquery-ui-datepicker-chinese.html
Query UI Datepicker這個用於日期顯示很方便而且提供了多種樣式，可以從jQuery UI中選擇喜歡的樣式和jQuery UI組件隨意下載js庫。
如果只是使用datepicker那么選擇時之選UI Core和Widgets中的Datepicker，然后選擇喜歡的主題，選擇版本，下載即可。
不過下載的jQuery UI庫中是沒有中文的，我們可以將如下js代碼放到一個js文件中，然后在文件中引用即可：
jQuery(function($){ $.datepicker.regional['zh-CN'] = { clearText: '清除', clearStatus: '清除已選日期', closeText: '關閉', closeStatus: '不改變當前選擇', prevText: '< 上月', prevStatus: '顯示上月', prevBigText: '<<', prevBigStatus: '顯示上一年', nextText: '下月>', nextStatus: '顯示下月', nextBigText: '>>', nextBigStatus: '顯示下一年', currentText: '今天', currentStatus: '顯示本月', monthNames: ['一月','二月','三月','四月','五月','六月', '七月','八月','九月','十月','十一月','十二月'], monthNamesShort: ['一月','二月','三月','四月','五月','六月', '七月','八月','九月','十月','十一月','十二月'], monthStatus: '選擇月份', yearStatus: '選擇年份', weekHeader: '周', weekStatus: '年內周次', dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'], dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'], dayNamesMin: ['日','一','二','三','四','五','六'], dayStatus: '設置 DD 為一周起始', dateStatus: '選擇 m月 d日, DD', dateFormat: 'yy-mm-dd', firstDay: 1, initStatus: '請選擇日期', isRTL: false}; $.datepicker.setDefaults($.datepicker.regional['zh-CN']); });
頁面調用
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 日期選擇器（Datepicker） - 其他月份的日期</title> <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css"> <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <link rel="stylesheet" href="jqueryui/style.css"> <script> jQuery(function($){ $.datepicker.regional['zh-CN'] = { clearText: '清除', clearStatus: '清除已選日期', closeText: '關閉', closeStatus: '不改變當前選擇', prevText: '< 上月', prevStatus: '顯示上月', prevBigText: '<<', prevBigStatus: '顯示上一年', nextText: '下月>', nextStatus: '顯示下月', nextBigText: '>>', nextBigStatus: '顯示下一年', currentText: '今天', currentStatus: '顯示本月', monthNames: ['一月','二月','三月','四月','五月','六月', '七月','八月','九月','十月','十一月','十二月'], monthNamesShort: ['一月','二月','三月','四月','五月','六月', '七月','八月','九月','十月','十一月','十二月'], monthStatus: '選擇月份', yearStatus: '選擇年份', weekHeader: '周', weekStatus: '年內周次', dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'], dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'], dayNamesMin: ['日','一','二','三','四','五','六'], dayStatus: '設置 DD 為一周起始', dateStatus: '選擇 m月 d日, DD', dateFormat: 'yy-mm-dd', firstDay: 1, initStatus: '請選擇日期', isRTL: false}; $.datepicker.setDefaults($.datepicker.regional['zh-CN']); }); $(function() { $( "#datepicker" ).datepicker({ showOtherMonths: true, selectOtherMonths: true, showButtonPanel: true, showOn: "both", buttonImageOnly: true, buttonImage: "calendar.gif", buttonText: "", changeMonth: true, changeYear: true }); }); </script> </head> <body> <p>日期：<input type="text" id="datepicker"></p> </body> </html>
結果：
