2016年1月15日 星期五

jQuery datepicker 設定年份範圍 yearRange yearSuffix shortYearCutoff



本文說明datepicker Options 中的 yearRange yearSuffix shortYearCutoff
其設定年份範圍跟世紀範圍設定

一、基本JS/HTML語法
JS:
$("#datepicker").datepicker({
      changeYear : true,
      yearRange : "1980:2030",
      yearSuffix : "年",
      dateFormat : "y/mm/dd",
      shortYearCutoff :"+10"
    });
 
 



二、基本說明

yearRange : "1980:2030"
yearRange 控制年份的下拉列表中顯示的年份數量,
可以是相對當前年(-nn:+nn),也可以是絕對值 (-nnnn:+nnnn)
default : "c-10:c+10"

yearSuffix : "年"
在年份後顯示文字

shortYearCutoff
default:"+10"
設置截止年份的值。如果是(0-99)的數字則已當年的年份來比較,
如果為字符串,則相應的轉為數字後再與當前年份相加。當超過截止年份時,則被認為是上個世紀。
這設定是配合年份設定顯示二位數時使用,配合dateFormat "y", parseDate

三、程式內容

<html>
<head>
<title>jquery.datepicker 17</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() {
    //17-jQuery datepicker 設定 yearRange yearSuffix shortYearCutoff
    $("#datepicker").datepicker({
      //可使用下拉式選單 - 年份
      changeYear : true,
      //yearRange 控制年份的下拉列表中顯示的年份數量,可以是相對當前年(-nn:+nn),也可以是絕對值 (-nnnn:+nnnn)
      //default : "c-10:c+10"
      //yearRange:"c-20:c+20",
      //yearRange : "2010:2020",
      yearRange : "1980:2030",
      //在年份後顯示文字
      yearSuffix : "年",
      //設定日期格式
      dateFormat : "y/mm/dd",
   shortYearCutoff :"+10"
    });
    $(".setDate").bind("click", function() {
   //設置截止年份的值。如果是(0-99)的數字則已當年的年份來比較,
      //如果為字符串,則相應的轉為數字後再與當前年份相加。當超過截止年份時,則被認為是上個世紀。
      //default:"+10"
   //這設定是配合年份設定顯示二位數時使用,配合dateFormat "y", parseDate
   //以下設定超過17年份為上個世紀的年份
   //例1:這為本世紀
   var testDate1 = $.datepicker.parseDate("y/mm/dd", "16/08/08",{shortYearCutoff : 17});
   //例2:這為上世紀
      var testDate2 = $.datepicker.parseDate("y/mm/dd", "18/08/08",{shortYearCutoff : 17});
      $("#showDateBox").append(testDate1);
      $("#showDateBox").append("<br>");
      $("#showDateBox").append(testDate2);
    });
  });
</script>
</head>
<body>
  <div class="datetest">
    <p class="datag">
      Date: <input type="text" id="datepicker" value="">
    </p>
  </div>
  <div>說明:jQuery datepicker 設定 yearRange yearSuffix shortYearCutoff</div>
  <div>
    <ul>
      <li><a href="javascript:void(0);" class="setDate">測試設定shortYearCutoff</a></li>
    </ul>
  </div>
  <div id="showDateBox"></div>
</body>
</html>



四、執行
圖1 yearRange yearSuffix 測試

圖2 shortYearCutoff 測試

五、測試


Date:
說明:jQuery datepicker 設定 yearRange yearSuffix shortYearCutoff



相關參考:

其它參考:
jQuery教學目錄


























其它文章

沒有留言:

張貼留言

標籤

Oracle (150) Oracle DB (144) Oracle_DB (143) Oracle SQL (135) JAVA (84) css-基本類 (65) MySQL (59) CSS Selector (58) jQuery (49) JavaScript-基本類 (39) Spring Boot (38) 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) linux cent os (13) CKEditor (12) JAVA-流程控制類 (12) JAVA_Spring (12) PHP (11) Spring MVC (11) MySQL-基本系列教學 (10) Notepad (10) Notepad++ (10) SQLite for java (10) Windows (10) c/c++ (10) 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) HTML5 (7) Hibernate (7) JAVA-OCWCD (7) JavaScript-陣列類 (7) Docker (6) JAVA-程式分享 (6) JAVA.util套件 (6) JavaScript-數學類 (6) MinGw (6) MySQL-其它類 (6) Servlet (6) centos (6) Apache_Tomcat (5) Apache套件_POI (5) CSS (5) JavaScript-Date物件 (5) JavaScript-其它類 (5) PostgreSQL (5) httpd (5) log4j (5) 基本資訊 (5) 開發工具 (5) CSS Properties (4) Dev-C++ (4) IntelliJ IDEA (4) Oracle DDL (4) Sublime (4) TortoiseSVN (4) apache_Maven (4) Android NDK (3) Eclipse IDE for C/C++ (3) Hibernate-基本類 (3) JAVA-問題 (3) JAVA-綀習分享 (3) JVM (3) Linux 指令 (3) Proxy Server (3) Spring Mobile (3) Spring web (3) Squid (3) VirtualBox (3) maven (3) zk (3) 生活其它 (3) Bootstrap (2) Filter (2) JAVA_IO (2) JAVA_其它_itext套件 (2) JBoss-問題 (2) JSP (2) Jboss (2) Listener (2) MySQL-語法快速查詢 (2) Spring AOP (2) Spring Batch (2) Spring Boot Actuator (2) Spring i18n (2) Subversive (2) Tomcat 8 (2) UML (2) WebJars (2) WinMerge (2) c++ (2) c語言綀習題 (2) jQuery Mobile (2) jQuery-事件處理 (2) jQuery-套件類 (2) putty (2) svn (2) weblogic (2) Apache_JMeter (1) Apache套件_BeanUtils (1) Apache套件_StringUtils (1) Base64 (1) Google API (1) HTML5-基本類 (1) Heap (1) JAVA 7 (1) JAVA SE 、JAVA EE、JAVA ME (1) JAVA 日期 (1) JAVA-OCJP (1) JAVA-WEB (1) JAVA_IDE (1) JAVA其它 (1) JBoss Server (1) JDK (1) JMX (1) JRE (1) Java RMI (1) Java String (1) Joda Time (1) Linux_其它 (1) MySQL教學 (1) Oracle_VirtualBox (1) SQL Server (1) SWT (1) Session (1) Stack (1) Struts 2 (1) Tool (1) ZK Studio (1) csv (1) grails-其它類 (1) jQuery-進階 (1) java mail (1) java web (1) java8 (1) jsoup (1) mockmvc (1) modules (1) tomcat (1) win10 (1) 其它類 (1) 圖片工具 (1) 模擬器 (1) 讀書分享 (1) 開發資訊 (1)

精選文章

初學 Java 的 HelloWorld 程式

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