2016年1月17日 星期日

jQuery datepicker setDefaults iso8601Week



本文說明datepicker 中的setDefaults iso8601Week
其設定參數及一年中的第幾週

一、基本JS/HTML語法
JS:
$.datepicker.setDefaults({
dateFormat : "(yy--mm--dd)"
});

$.datepicker.iso8601Week( $.datepicker.parseDate("yy/mm/dd", "2008/08/08"));

二、基本說明

全局設置日期選擇插件的參數.
$.datepicker.setDefaults( options )

給出一個日期,確實他是一年中的第幾週
$.datepicker.iso8601Week( date )


三、程式內容

<html>
<head>
<title>jquery.datepicker 27</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() {
    //27-jQuery datepicker setDefaults iso8601Week
    $("#datepicker").datepicker();
    $(".setDefaultsTest").bind("click", function() {
   $.datepicker.setDefaults({
    dateFormat : "(yy--mm--dd)"
   });
    });
 $(".getiso8601WeekTest").bind("click", function() {
  $("#showDateBox").append("第幾周:"+ $.datepicker.iso8601Week( $.datepicker.parseDate("yy/mm/dd", "2008/08/08") ));
    });
  });
</script>
</head>
<body>
  <div class="datetest">
    <p class="datag">
      Date: <input type="text" id="datepicker" value="">
    </p>
  </div>
  <div>說明:jQuery datepicker Methods setDefaults iso8601Week</div>
  <div>
    <ul>
      <li><a href="javascript:void(0)" class="setDefaultsTest">設定日期格式為(yy--mm--dd)</a></li>
   <li><a href="javascript:void(0)" class="getiso8601WeekTest">取得日期2008/08/08是第幾周</a></li>
    </ul>
  </div>
  <div id="showDateBox"></div>
</body>
</html>



四、執行
圖1

五、測試

Date:
說明:jQuery datepicker Methods setDefaults iso8601Week



相關參考:


其它參考:
jQuery教學目錄
























其它文章

jQuery datepicker 事件 onChangeMonthYear



本文說明 datepicker 事件 onChangeMonthYear
當日曆移動到新的月份或年份時,觸法此事件

一、基本JS/HTML語法
JS:
    $("#datepicker").datepicker({
      onChangeMonthYear : fun1
    });

二、基本說明

onChangeMonthYear : fun1
default : null 不多做動作
當日曆移動到新的月份或年份時,叫用此方法。
function(Integer year,Integer month,Object inst)
fun1:當日曆移動到新的月份或年份時,叫用此方法,顯示訊息。
function fun1(year, month, inst) {
 $("#showDateBox").append("onChangeMonthYear......"+year+"/"+month);
 console.log("year", year);
 console.log("month", month);
 console.log("inst", inst);
}

三、程式內容

<html>
<head>
<title>jquery.datepicker 26</title>
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<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() {
    //26-jQuery datepicker 事件 onChangeMonthYear
    $("#datepicker").datepicker({
      //設定日期格式
      dateFormat : "yy/mm/dd",
      //當日曆移動到新的月份或年份時,叫用此方法
      //default 不多做動作
      onChangeMonthYear : fun1
    });
    //function(Integer year,Integer month,Object inst)
    //當日曆移動到新的月份或年份時,叫用此方法
    function fun1(year, month, inst) {
   $("#showDateBox").append("onChangeMonthYear......"+year+"/"+month);
      console.log("year", year);
      console.log("month", month);
      console.log("inst", inst);
    }
  });
</script>
</head>
<body>
  <div class="datetest">
    <p class="datag">
      Date: <input type="text" id="datepicker" value="">
    </p>
  </div>
  <div>說明:jQuery datepicker 事件 onChangeMonthYear </div>
  <br>
  <div id="showDateBox"></div>
</body>
</html>



四、執行
圖1

五、測試

Date:
說明:jQuery datepicker 事件 onChangeMonthYear





相關參考:

其它參考:
jQuery教學目錄
























其它文章

jQuery datepicker 事件 onClose


本文說明datepicker 事件 onClose
其事件會是關閉日期框要做什麼事。

一、基本JS/HTML語法
JS:
    $("#datepicker").datepicker({
      onClose : fun1
    });

二、基本說明

onClose : fun1
default : null 不多做動作
function(String dateText,Object inst)
關閉日曆框後要多做什麼動作。

fun1為加入判斷日期為空值則提示訊息。
function fun1(dateText, inst) {
 console.log("onClose");
 console.log("dateText", dateText);
 console.log("inst", inst);
 if (dateText == "") {
$("#showDateBox").append("請選擇日期......");
 }
}
三、程式內容

<html>
<head>
<title>jquery.datepicker 25</title>
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<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() {
    //25-jQuery datepicker 事件 onClose
    $("#datepicker").datepicker({
      //設定日期格式
      dateFormat : "yy/mm/dd",
      //關閉日曆框後要多做什麼動作
      //default 不多做動作
      onClose : fun1
    });
    //function(String dateText,Object inst)
    //加入判斷日期為空值則提示訊息
    function fun1(dateText, inst) {
      console.log("onClose");
      console.log("dateText", dateText);
      console.log("inst", inst);
      if (dateText == "") {
  $("#showDateBox").append("請選擇日期......");
      }
    }
  });
</script>
</head>
<body>
  <div class="datetest">
    <p class="datag">
      Date: <input type="text" id="datepicker" value="">
    </p>
  </div>
  <div>說明:jQuery datepicker 事件 onClose </div>
  <br>
  <div id="showDateBox"></div>
</body>
</html>



四、執行
圖1

五、測試
Date:
說明:jQuery datepicker 事件 onClose





相關參考:

其它參考:
jQuery教學目錄























其它文章

jQuery datepicker 事件 onSelect


本文說明datepicker 事件 onSelect
其效果選擇日期後要多做什麼動作

一、基本JS/HTML語法
JS:
$("#datepicker").datepicker({
 onSelect : fun1
});

二、基本說明

onSelect : fun1
default : null 不多做動作
function(String dateText,Object inst)
選擇日期後要多做什麼動作
var array = [ "2016/01/14", "2016/01/15", "2016/01/16" ];
//function(String dateText,Object inst)
function fun1(dateText, inst) {
 console.log("onSelect");
 console.log("dateText",dateText);
 console.log("inst",inst);
 if(array.indexOf(dateText) > -1){
$("#showDateBox").append("選中日期......"+dateText);
 }
}

三、程式內容

<html>
<head>
<title>jquery.datepicker 24</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() {
    //24-jQuery datepicker 事件 onSelect
    $("#datepicker").datepicker({
      //設定日期格式
      dateFormat : "yy/mm/dd",
      //選擇日期後要多做什麼動作
      //default 不多做動作
      onSelect : fun1
    });
    var array = [ "2016/01/14", "2016/01/15", "2016/01/16" ];
    //function(String dateText,Object inst)
    function fun1(dateText, inst) {
      console.log("onSelect");
      console.log("dateText",dateText);
      console.log("inst",inst);
      if(array.indexOf(dateText) > -1){
  $("#showDateBox").append("選中日期......"+dateText);
      }
    }
  });
</script>
</head>
<body>
  <div class="datetest">
    <p class="datag">
      Date: <input type="text" id="datepicker" value="">
    </p>
  </div>
  <div>說明:jQuery datepicker 事件 onSelect 。<br> 選中2016/01/14、2016/01/15、2016/01/16 會提示訊息</div>
  <br>
  <div id="showDateBox"></div>
</body>
</html>



四、執行
圖1

五、測試

Date:
說明:jQuery datepicker 事件 onSelect




相關參考:

其它參考:
jQuery教學目錄























其它文章

jQuery datepicker 事件 beforeShow beforeShowDay



本文說明datepicker 事件 beforeShow beforeShowDay
其效果顯示日曆框前要做的事

一、基本JS/HTML語法
JS:
$("#datepicker").datepicker({
           beforeShow : fun1,
           beforeShowDay : fun2
         });

二、基本說明

beforeShow : fun1
Default: null
function(Element imput,Object inst)
顯示日曆框前要做的事,對input 物件操作。
fun1為自訂方法。
function fun1(input, inst) {
 console.log("beforeShow");
 console.log("input",input);
 console.log("inst",inst);
}

beforeShowDay : fun2
Default: null
function (Date date)
顯示日曆框前要做的事,對日期操作。
fun2為自訂方法。
var array = [ "2016/01/14", "2016/01/15", "2016/01/16" ];
//本方法效果限制不可選的日期。(array中為不可選日期)
function fun2(date) {
 var string = jQuery.datepicker.formatDate('yy/mm/dd', date);
 console.log("beforeShowDay", string);
 return [ array.indexOf(string) == -1 ]
}



三、程式內容

<html>
<head>
<title>jquery.datepicker 23</title>
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<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() {
    //23-jQuery datepicker 事件 beforeShow beforeShowDay
    $("#datepicker").datepicker({
      //設定日期格式
      dateFormat : "yy/mm/dd",
      //顯示日曆框前要做的事,對input 物件操作
      beforeShow : fun1,
      //顯示日曆框前要做的事,對日期操作
      beforeShowDay : fun2
    });
    //function(Element imput,Object inst)
    //Element input 
    //Object datepicker
    function fun1(input, inst) {
  $("#showDateBox").append("beforeShow");
  $("#showDateBox").append("input"+input);
  $("#showDateBox").append("inst"+inst);
  console.log("beforeShow");
  console.log("input",input);
  console.log("inst",inst);
    }

    var array = [ "2016/01/14", "2016/01/15", "2016/01/16" ];
    //本方法效果限制不可選的日期。(array中為不可選日期)
    //function (Date date)
    function fun2(date) {
      var string = jQuery.datepicker.formatDate('yy/mm/dd', date);
      console.log("beforeShowDay", string);
      return [ array.indexOf(string) == -1 ]
    }
  });
</script>
</head>
<body>
  <div class="datetest">
    <p class="datag">
      Date: <input type="text" id="datepicker" value="">
    </p>
  </div>
  <div>說明:jQuery datepicker 事件 beforeShow beforeShowDay </div>
  <br>
  <div id="showDateBox"></div>
</body>
</html>



四、執行
圖1

五、測試


Date:
說明:jQuery datepicker 事件 beforeShow beforeShowDay



相關參考:

其它參考:
jQuery教學目錄
























其它文章

jQuery datepicker Methods dialog widget



本文說明datepicker Methods 中的dialog widget
其效果另開日曆框及取得日曆框物件

一、基本JS/HTML語法
JS:
$("#datepicker").datepicker("dialog");
$("#datepicker").datepicker("widget");

二、基本說明

另開日曆框
$("#datepicker").datepicker("dialog");

取得 datepicker 物件
$("#datepicker").datepicker("widget");

三、程式內容

<html>
<head>
<title>jquery.datepicker 22</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() {
    //22-jQuery datepicker Methods dialog widget
    $("#datepicker").datepicker({
      //設定日期格式
      dateFormat : "yy/mm/dd"
    });
    //dialog(date(必要),onSelect(不一定要給),options(不一定要給),pos(不一定要給))
    //.datepicker("dialog","日期","選擇日期後的動作","option參數","顯示位置")
    $(".dialogDate").bind("click", function() {
      $("#datepicker").datepicker("dialog", "2016/01/08", function() {
        console.log("dialog text.");
      }, {
        dateFormat : "yy/mm/dd"
      }, [ event.pageX, event.pageY ]);
    });
    //回傳datepicker 物件
    $(".widgetDate").bind("click", function() {
      var widgetObj = $("#datepicker").datepicker("widget");
      console.log("widgetObj", widgetObj);
    });
  });
</script>
</head>
<body>
  <div class="datetest">
    <p class="datag">
      Date: <input type="text" id="datepicker" value="">
    </p>
  </div>
  <div>說明:jQuery datepicker Methods dialog widget </div>
  <br>
  <div>
    <ul>
      <li><a href="javascript:void(0)" class="dialogDate">設定dialog</a></li>
      <li><a href="javascript:void(0)" class="widgetDate">widget</a></li>
    </ul>
  </div>
  <div id="showDateBox"></div>
</body>
</html>



四、執行
圖1

五、測試
Date:
說明:jQuery datepicker Methods dialog widget





相關參考:

其它參考:
jQuery教學目錄



























其它文章

jQuery datepicker Methods destroy isDisabled


本文說明 datepicker Methods 中的 destroy isDisabled
其銷毀及禁用的方法

一、基本JS/HTML語法
JS:
$("#datepicker").datepicker("destroy");
$("#datepicker").datepicker("isDisabled")
$("#datepicker").datepicker("option", "disabled", true);

二、基本說明

銷毀 datepicker
$("#datepicker").datepicker("destroy");

設定禁用 datepicker
$("#datepicker").datepicker("option", "disabled", true);

是否有禁用 datepicker
$("#datepicker").datepicker("isDisabled")

三、程式內容

<html>
<head>
<title>jquery.datepicker 21</title>
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<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() {
    //21-jQuery datepicker Methods destroy isDisabled option
    $("#datepicker").datepicker({
      //設定日期格式
      dateFormat : "yy/mm/dd"//,
    //disabled:true
    });
    $(".destroyDate").bind("click", function() {
      $("#datepicker").datepicker("destroy");
    });
    $(".isDisabledDate").bind(
        "click",
        function() {
          $("#showDateBox").append(
              "是否被停用:" + $("#datepicker").datepicker("isDisabled"));
        });
    $(".setDisabledDate").bind("click", function() {
      $("#datepicker").datepicker("option", "disabled", true);
    });
  });
</script>
</head>
<body>
  <div class="datetest">
    <p class="datag">
      Date: <input type="text" id="datepicker" value="">
    </p>
  </div>
  <div>說明:jQuery datepicker Methods destroy isDisabled option </div>
  <br>
  <div>
    <ul>
      <li><a href="javascript:void(0)" class="destroyDate">設定destroy日期</a></li>
      <li><a href="javascript:void(0)" class="isDisabledDate">isDisabled</a></li>
      <li><a href="javascript:void(0)" class="setDisabledDate">設定Disabled</a></li>
    </ul>
  </div>
  <div id="showDateBox"></div>
</body>
</html>



四、執行
圖1

五、測試


Date:
說明:jQuery datepicker Methods destroy isDisabled option



相關參考:

其它參考:
jQuery教學目錄























其它文章

2016年1月15日 星期五

jQuery datepicker Methods show hide refresh


本文說明jQuery datepicker Methods 中的 show hide refresh 方法
其是顯示/關閉/重新整理月曆框

一、基本JS/HTML語法
JS:
$("#datepicker").datepicker("show");
$("#datepicker").datepicker("hide");
$("#datepicker").datepicker("refresh");

二、基本說明

顯示日曆框
$("#datepicker").datepicker("show");
關閉日曆框
$("#datepicker").datepicker("hide");
重新整理日曆框
$("#datepicker").datepicker("refresh");

三、程式內容


<html>
<head>
<title>jquery.datepicker 20</title>
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<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() {
    //20-jQuery datepicker Methods show hide refresh
    $("#datepicker").datepicker({
      //設定日期格式
      dateFormat : "yy/mm/dd"
    });
    $(".showDate").bind("click", function() {
      $("#datepicker").datepicker("show");
    });
    $(".hideDate").bind("click", function() {
      $("#datepicker").datepicker("hide");
    });
    $(".refreshDate").bind("click", function() {
      $("#datepicker").datepicker("refresh");
    });
  });
</script>
</head>
<body>
  <div class="datetest">
    <p class="datag">
      Date: <input type="text" id="datepicker" value="">
    </p>
  </div>
  <div>說明:jQuery datepicker Methods show hide refresh</div>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <div>
    <ul>
      <li><a href="javascript:void(0)" class="showDate">設定show日期</a></li>
      <li><a href="javascript:void(0)" class="hideDate">設定hide日期</a></li>
      <li><a href="javascript:void(0)" class="refreshDate">設定refresh日期</a></li>
    </ul>
  </div>
  <div id="showDateBox"></div>
</body>
</html>


四、執行
圖1

五、測試


Date:
說明:jQuery datepicker Methods show hide refresh























相關參考:

其它參考:
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程式!!"); } } ...