其設定限制日期最小最大
一、基本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 datepicker 預設基本樣式
- jQuery datepicker 月曆樣式種類
- jQuery datepicker 加入button效果 showOn buttonText
- jQuery datepicker 加入月曆icon小圖buttonImage buttonImageOnly
- jQuery datepicker 設定動畫效果 showAnim showOptions duration
- jQuery datepicker 設定動畫效果樣式
- jQuery datepicker 顯示及格式相關 appendText altField altFormat autoSize dateFormat constrainInput
- jQuery datepicker 日期解析及格式相關方法 parseDate formatDate
- jQuery datepicker 月曆框下拉式年月份 changeMonth changeYear showMonthAfterYear
- jQuery datepicker 月曆框功能鍵 showButtonPanel closeTextType currentText nextText prevText navigationAsDateFormat
- jQuery datepicker 設定月曆顯示文字 dayNames dayNamesShort dayNamesMin monthNames monthNamesShort
- jQuery datepicker 設定多個月曆框 numberOfMonths showCurrentAtPos
- jQuery datepicker 設定月曆框上下月按鈕效果 showOtherMonths selectOtherMonths stepMonths isRTL gotoCurrent
其它參考：
jQuery教學目錄
其它文章
沒有留言:
張貼留言