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

其它文章


​
arrow
arrow
    文章標籤
    datepicker jquery 目錄 教學 refresh 月曆 設定 hide div show script methods 日期 ui dateformat class bind content javascript showdate
    全站熱搜

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

    E-mail轉寄