2016年1月14日 星期四

jQuery datepicker 設定月曆顯示文字 dayNames dayNamesShort dayNamesMin monthNames monthNamesShort


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
























其它文章

標籤

Oracle (149) Oracle DB (144) Oracle_DB (143) Oracle SQL (135) JAVA (82) css-基本類 (65) CSS Selector (58) MySQL (58) jQuery (49) JavaScript-基本類 (39) JavaScript (37) JavaScript HTML DOM (37) JavaScript-HTML_DOM (36) CSS3 (30) JAVA-基本類 (28) jQuery UI (27) Apache (23) Oracle GROUP BY (20) datepicker (20) Android (18) Oracle Date (17) c (17) JAVA-lang套件 (16) Linux (16) Oracle Sub Query (16) Spring-基本類 (16) jQuery-基本類 (16) MySQL-進階系列教學 (15) Android基本類 (14) Grails (14) Oracle join (14) SQLite (13) Spring (13) WIN7-基本類 (13) grails-基本類 (13) CKEditor (12) JAVA-流程控制類 (12) JAVA_Spring (12) PHP (11) linux cent os (11) MySQL-基本系列教學 (10) SQLite for java (10) Windows (10) c/c++ (10) Notepad++ (9) eclipse (9) jQuery-Selector (9) sqldeveloper (9) DB_Toad (8) JAVA_IDE_Eclipse (8) JavaScript-String類 (8) MySQL DB Toad (8) MySQL-DATE相關 (8) MySQL-函式相關 (8) Spring Bean (8) Android Studio (7) Hibernate (7) JAVA-OCWCD (7) JavaScript-陣列類 (7) JAVA-程式分享 (6) JAVA.util套件 (6) JavaScript-數學類 (6) MinGw (6) MySQL-其它類 (6) Spring MVC (6) Apache_Tomcat (5) Apache套件_POI (5) CSS (5) JavaScript-Date物件 (5) JavaScript-其它類 (5) PostgreSQL (5) httpd (5) log4j (5) 基本資訊 (5) CSS Properties (4) Dev-C++ (4) Oracle DDL (4) Servlet (4) apache_Maven (4) Android NDK (3) Eclipse IDE for C/C++ (3) HTML5 (3) Hibernate-基本類 (3) JAVA-問題 (3) JAVA-綀習分享 (3) Linux 指令 (3) Proxy Server (3) Spring Mobile (3) Squid (3) maven (3) zk (3) 生活其它 (3) Bootstrap (2) JAVA_IO (2) JAVA_其它_itext套件 (2) JBoss-問題 (2) Jboss (2) MySQL-語法快速查詢 (2) Spring AOP (2) Spring Batch (2) Spring Boot (2) Spring i18n (2) Subversive (2) Tomcat 8 (2) UML (2) c++ (2) c語言綀習題 (2) jQuery Mobile (2) jQuery-事件處理 (2) jQuery-套件類 (2) svn (2) weblogic (2) Apache_JMeter (1) Apache套件_BeanUtils (1) Apache套件_StringUtils (1) Google API (1) HTML5-基本類 (1) JAVA 7 (1) JAVA 日期 (1) JAVA-OCJP (1) JAVA-WEB (1) JAVA_IDE (1) JAVA其它 (1) JBoss Server (1) JMX (1) JSP (1) Java RMI (1) Java String (1) Joda Time (1) Linux_其它 (1) MySQL教學 (1) Oracle_VirtualBox (1) SQL Server (1) SWT (1) Session (1) Struts 2 (1) Tool (1) TortoiseSVN (1) ZK Studio (1) csv (1) grails-其它類 (1) jQuery-進階 (1) java mail (1) java web (1) jsoup (1) modules (1) tomcat (1) 其它類 (1) 圖片工具 (1) 模擬器 (1) 櫻桃鴨 (1) 泰山 (1) 聊天 (1) 聚餐 (1) 開發工具 (1) 開發資訊 (1) 霸王櫻桃鴨 (1)

精選文章

初學 Java 的 HelloWorld 程式

撰寫一個JAVA程式 public class HelloWorld{ public static void main(String[ ] args){ System.out.println("我第一支Java程式!!"); } } ...