close

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

其它文章


​
arrow
arrow
    文章標籤
    datepicker jquery onclose 目錄 教學 月曆 console log script 設定 meta ui methods 事件 日期 content js cache 其它 關閉
    全站熱搜

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

    E-mail轉寄