close

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

其它文章


​
arrow
arrow
    文章標籤
    datepicker jquery onselect 目錄 教學 月曆 2016 console log script 設定 equiv div function methods dateformat array content 事件 選中
    全站熱搜

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

    E-mail轉寄