close

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

其它文章


​
arrow
arrow
    文章標籤
    datepicker jquery dialog 目錄 教學 widget 月曆 methods div 設定 dateformat content cache class 日曆 function 其它 javascript void bind
    全站熱搜

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

    E-mail轉寄