본 글의 예시에서는 JQuery 캘린더 플러그인 My97DatePicker의 날짜 범위 제한 방식을 소개하고 있으며, 참고용으로 공유합니다
```
다음은 날짜 범위 제한 사항을 강조한 것입니다. 1) 정적 제한 예 1.1:
```
예 1.2:
```
예 1.3:
```
예 1.4:
```
2) 동적 제한
형식 설명%y년
F{}{}는 사용자 정의 JS 코드를 작성할 수 있는 함수입니다 예 2.1:
예 2.2:
```
예 2.3:
```
예 2.4:
까지의 날짜만 선택할 수 있습니다.
```
예 2.5:
```
3) 스크립트 사용자 정의 제한 예 3.1:
에서
```<input id="d4311" class="Wdate" type="text" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4312\')||\'2020-10-01\'}'})"/>
```<input id="d4312" class="Wdate" type="text" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d4311\')}',maxDate:'2020-10-01'})"/>
로그인 후 복사
예 3.2:
```<input type="text" class="Wdate" id="d4321" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4322\',{d:-3});}'})"/>
```<input type="text" class="Wdate" id="d4322" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d4321\',{d:3});}'})"/>
로그인 후 복사
예 3.3:
<input type="text" class="Wdate" id="d4331" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4332\',{M:-3,d:-2})||$dp.$DV(\'2020-4-3\',{M:-3,d:-2})}'})"/>
<input type="text" class="Wdate" id="d4332" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d4331\',{M:3,d:2});}',maxDate:'2020-4-3'})"/>
로그인 후 복사
예 3.4: JS 재능을 활용하여 원하는 날짜 제한을 정의하세요
물론 무작위로 생성된 날짜로 자동 이동합니다. 물론 이 예는 실용성은 없으며 시연 목적으로만 사용됩니다
<script>
//返回一个随机的日期
function randomDate(){
var Y = 2000 + Math.round(Math.random() * 10);
var M = 1 + Math.round(Math.random() * 11);
var D = 1 + Math.round(Math.random() * 27);
return Y+'-'+M+'-'+D;
}
</script>
<input type="text" class="Wdate" id="d434" onFocus="var date=randomDate();WdatePicker({minDate:date,maxDate:date})"/>
로그인 후 복사
4) 유효하지 않은 날짜 제한예 4.1:
```
토요일과 일요일에 해당하는 날짜를 비활성화합니다
```
5）无效日期限制 可以使用此功能禁用,所指定的一个或多个日期,只要熟悉正则表达式,可以尽情发挥['2008-02-01','2008-02-29'] ['2008-..-01','2008-02-29'] ['200[0-8]]-02-01','2008-02-29'] ['^2006'] ['....-..-01','%y-%M-%d'] ['%y-%M-{%d-1}','%y-%M-{%d+1}'] ['....-..-.. 10\:00\:00'] 示例5.1： 禁用 每个月份的 5日 15日 25日
```<input id="d451" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:['5$']})"/>
//注意 :'5$' 表示以 5 结尾 注意 $ 的用法
로그인 후 복사
示例5.2： 禁用 所有早于2000-01-01的日期
```<input id="d452" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:['^19']})"/>
//注意:'^19' 表示以 19 开头 注意 ^ 的用法
//当然,可以使用minDate实现类似的功能 这里主要是 在演示 ^ 的用法
로그인 후 복사
示例5.3： 配合min/maxDate使用,可以把可选择的日期分隔成多段
```
示例5.4： min/maxDate disabledDays disabledDates 配合使用 即使在要求非常苛刻的情况下也能满足需求
```
示例5.5： 禁用前一个小时和后一个小时内所有时间 使用 %y %M %d %H %m %s 等变量
```
示例5.6： #F{}也是可以使用的
<script>
function randomH(){
//产生一个随机的数字 0-23
var H = Math.round(Math.random() * 23);
if(H<10) H='0'+H;
//返回 '^' + 数字
return '^'+H;
}
</script>
<input type="text" class="Wdate" id="d456" onFocus="WdatePicker({dateFmt:'HH:mm:ss',disabledDates:['#F{randomH()}']})"/>
로그인 후 복사
6）有效日期 使用无效日期可以很方便的禁用不可用的日期,但是在只需要启用少部分日期的情况下,有效日期的功能就非常适合了.示例6.1：
```<input id="d46" type="text" class="Wdate" onFocus="WdatePicker({opposite:true,disabledDates:['5$']})"/>
//注意 :'5$' 表示以 5 结尾 注意 $ 的用法
로그인 후 복사
7) 특별한 날과 날짜 특별일 및 특별일의 사용법은 완전히 무효일 및 무효일과 동일하지만 반대속성은 무효입니다예 7.1:
```
예 7.2:
```
위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
