在JSNWORK的jQuery ui – datepicker 日期使用繁體中文或各國語言提到在官方的 github 找到 https://github.com/jquery/jquery-ui/tree/master/ui/i18n 裡面有一隻 datepicker-zh-TW.js 下載下來，這樣預設的英文datepicker就可以替換為顯示中文
<link href=”jquery-ui-1.11.2/jquery-ui.min.css” rel=”stylesheet” >
<link href=”jquery-ui-1.11.2/jquery-ui.theme.min.css” rel=”stylesheet” >
<script src=”jquery-1.11.1.min.js”></script>
<script src=”jquery-ui-1.11.2/jquery-ui.min.js”></script>
<script src=”jquery-ui-1.11.2/datepicker-zh-TW.js”></script><!– 繁體中文 –>
<script src=”jquery-ui-1.11.2/datepicker-ko.js”></script><!– 韓語 –>
如果同時存在多種語言，jQuery UI 會採用你引用語言的最後一筆，如上述會採用韓語。如果要手動指定，參考官網寫法 ，可以添加這句描述
// 陣列regional內的字串填寫你要的語言, 如繁體中文
$.datepicker.setDefaults( $.datepicker.regional[ “zh-TW” ] );
如果是使用微軟的Visual Studio 2017的話，就更方便，也比較推薦使用這個方式，從Visual Studio 2017開發工具「工具(T)」-「NuGet套件管理員(N)」-「套件管理器主控台(O)」開啟「管理方案的NuGet套件(N)」視窗，在「搜尋(Ctrl+L)欄位」輸入「i18n」查詢找到「jQuery.UI.i18n」這個套件，按「安裝」按鈕就可以安裝最新穩定版1.10.2版了。
簡單分享範例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="Content/themes/base/all.css" rel="stylesheet" />
</head>
<body>
<input type="text" name="myInput" id="mydate" />
<script src="Scripts/jquery-3.4.1.js"></script>
<script src="Scripts/jquery-ui-1.12.1.js"></script>
<script src="Scripts/jquery-ui-i18n.js"></script>
<script>
$(function () {
//設定中文語系
$.datepicker.regional['zh-TW'] = {
dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
dayNamesMin: ["日", "一", "二", "三", "四", "五", "六"],
monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
prevText: "上月",
nextText: "次月",
weekHeader: "週"
};
//將預設語系設定為中文
$.datepicker.setDefaults($.datepicker.regional["zh-TW"]);
$(function () {
$("#mydate").datepicker({ dateFormat: 'yy-mm-dd' });
});
});
</script>
</body>
</html>
jQuery ui datepicker 範例圖示：
※jQuery UI更新至 jQuery UI 1.13.0
1 則留言