close

本文說明datepicker Options 中的minDate maxDate hideIfNoPrevNext

其設定限制日期最小最大

一、基本JS/HTML語法

JS: 

 //jQuery datepicker 設定限制日期最小最大 minDate maxDate hideIfNoPrevNext
    $("#datepicker").datepicker({
      showOtherMonths : true,
      hideIfNoPrevNext : true,
      minDate : "-10d",
      maxDate : "+10d"
    });

二、基本說明

showOtherMonths : true

default:false

顯示上個月日期 及下個月日期 ，但是不可選的。

hideIfNoPrevNext : true

default:false

設置當沒有上一個/下一個可選擇的情況下，隱藏掉相應的按鈕。（默認為不可用）

配合有設定最大最小時使用

minDate : "-10d"

設置一個最小的可選日期。可以是Date對象，或者是數字（從今天算起，例如+7），

或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。

maxDate : "+10d"

設置一個最大的可選日期。可以是Date對象，或者是數字（從今天算起，例如+7），

或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。

三、程式內容 

<html>
<head>
<title>jquery.datepicker 15</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() {
    //jQuery datepicker 設定限制日期最小最大 minDate maxDate hideIfNoPrevNext
    $("#datepicker").datepicker({
      //顯示上個月日期 及下個月日期 ，但是不可選的。
      //default:false
      showOtherMonths : true,
      // 設置當沒有上一個/下一個可選擇的情況下，隱藏掉相應的按鈕。（默認為不可用）
      //配合有設定最大最小時使用
      //default:false
      hideIfNoPrevNext : true,
      //設置一個最小的可選日期。可以是Date對象，或者是數字（從今天算起，例如+7），
      //或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。
      minDate : "-10d",
      //  設置一個最大的可選日期。可以是Date對象，或者是數字（從今天算起，例如+7），
      //或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。
      maxDate : "+10d"
    });
  });
</script>
</head>
<body>
  <div class="datetest">
    <p class="datag">
      Date: <input type="text" id="datepicker" value="">
    </p>
  </div>
  <div>說明：jQuery datepicker 設定限制日期最小最大 minDate maxDate hideIfNoPrevNext</div>
</body>
</html>

四、執行

圖1

五、測試

Date: 

說明：jQuery datepicker 設定限制日期最小最大 minDate maxDate hideIfNoPrevNext

相關參考：

其它參考：

jQuery教學目錄

其它文章


​
arrow
arrow
    文章標籤
    datepicker jquery mindate 目錄 教學 代表 月曆 日期 設定 字符串 最小 script equiv 設置 7d 最大 ui true 算起 可選
    全站熱搜

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

    E-mail轉寄