本文說明datepicker Options 中的dayNames dayNamesShort dayNamesMin monthNames monthNamesShort
其效果是會改變顯示文字
一、基本JS/HTML語法
JS：
$("#datepicker").datepicker({
dayNames : [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ],
dayNamesShort : [ "日", "一", "二", "三", "四", "五", "六" ],
dayNamesMin : [ "日", "一", "二", "三", "四", "五", "六" ],
monthNames : [ "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月","10月", "11月", "12月" ],
monthNamesShort : [ "1", "2", "3", "4", "5", "6", "7", "8", "9","10", "11", "12" ],
nextText : "下個月",
prevText : "上個月"
});
二、基本說明
dayNames : [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ] 星期 此用於dateFormat的顯示，以及日曆框中滑鼠移到星期標題的顯示 dayNamesShort : [ "日", "一", "二", "三", "四", "五", "六" ] 星期 此用於dateFormat的顯示 dayNamesMin : [ "日", "一", "二", "三", "四", "五", "六" ] 星期 日曆框中的標題 monthNames : [ "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月","10月", "11月", "12月" ] 設定月份名稱 monthNamesShort : [ "1", "2", "3", "4", "5", "6", "7", "8", "9","10", "11", "12" ] 設定月份縮寫 nextText : "下個月" 設定 Next 鏈結文字 prevText : "上個月" 設定 Prev 鏈結文字
三、程式內容
<html>
<head>
<title>jquery.datepicker 12</title>
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$("#datepicker").datepicker({
appendText : "(西元年-月-日)",
altField : "#datepicker",
altFormat : "yy/mm/dd D",
dateFormat : "yy/mm/dd D",
//星期 此用於dateFormat的顯示，以及日曆框中滑鼠移到星期標題的顯示
dayNames : [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ],
//星期 此用於dateFormat的顯示
dayNamesShort : [ "日", "一", "二", "三", "四", "五", "六" ],
//星期 日曆框中的標題
dayNamesMin : [ "日", "一", "二", "三", "四", "五", "六" ],
//設定月份名稱
monthNames : [ "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月","10月", "11月", "12月" ],
//設定月份縮寫
monthNamesShort : [ "1", "2", "3", "4", "5", "6", "7", "8", "9","10", "11", "12" ],
//設定 Next 鏈結文字
nextText : "下個月",
//設定 Prev 鏈結文字
prevText : "上個月"
});
});
</script>
</head>
<body>
<div class="datetest">
<p class="datag">
Date: <input type="text" id="datepicker" value="">
</p>
</div>
<div>說明：設定面板顯示相關文字1</div>
</body>
</html>
四、執行
圖1
五、測試
Date:
說明：設定面板顯示相關文字
相關參考：
- jQuery datepicker 預設基本樣式
- jQuery datepicker 月曆樣式種類
- jQuery datepicker 加入button效果 showOn buttonText
- jQuery datepicker 加入月曆icon小圖buttonImage buttonImageOnly
- jQuery datepicker 設定動畫效果 showAnim showOptions duration
- jQuery datepicker 設定動畫效果樣式
- jQuery datepicker 顯示及格式相關 appendText altField altFormat autoSize dateFormat constrainInput
- jQuery datepicker 日期解析及格式相關方法 parseDate formatDate
- jQuery datepicker 月曆框下拉式年月份 changeMonth changeYear showMonthAfterYear
- jQuery datepicker 月曆框功能鍵 showButtonPanel closeTextType currentText nextText prevText navigationAsDateFormat
其它參考：
jQuery教學目錄
其它文章
沒有留言:
張貼留言