close

本文說明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教學目錄

其它文章


​
arrow
arrow
    文章標籤
    datepicker 目錄 jquery 教學 dateformat prevtext nexttext daynames monthnames 設定 星期 框中 顯示 月份 鏈結 appendtext 月曆 日曆 content cache
    全站熱搜

    PG Levin Li 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄