My97DatePicker具有強(qiáng)大的日期功能，能限制日期范圍，對于編寫雙日歷比較簡便。

注意事項(xiàng)：

My97DatePicker目錄是一個整體，不可以破壞

My97DatePicker.html 是必須的文件 不可以刪除?

各個目錄及文件的用途

WdatePicker.js ?配置文件 可多個共存

config.js 語言和皮膚配置文件 （可以不引入）

calendar.js 日期庫主文件（可以不引入）

1、正常調(diào)用

<input id="demo1" type="text"?onClick="WdatePicker()"/>

2、圖標(biāo)觸發(fā)

<input id="d12" type="text"/>
<img οnclick="WdatePicker({el:'d12'})" src="../skin/datePicker.gif" width="16" height="22" align="absmiddle">

注釋：el為掛載元素 ?后面?zhèn)魅肟丶膇d?

3、支持周顯示

<input id="d121" type="text" οnfοcus="WdatePicker({isShowWeek:true})"/>

4、利用onpicked事件把周賦值給另外的文本框

<input type="text" class="Wdate" id="d122" onFocus="WdatePicker({isShowWeek:true,onpicked:function() {$dp.$('d122_1').value=$dp.cal.getP('W','W');$dp.$('d122_2').value=$dp.cal.getP('W','WW');}})"/>

?

5、只讀開關(guān)，高亮周末顯示

設(shè)置readOnly屬性 true或false設(shè)置是否為只讀模式

設(shè)置highLineWeekDay屬性true或false可指定是否高亮周末

6、清空按鈕和今天按鈕的控制

需要自定義，分別對應(yīng)isShowClear 和 isShowToday 默認(rèn)值都為true

7、自定義彈出的位置

<input class="Wdate" type="text" id="d16" οnfοcus="WdatePicker({position:{left:100,top:50}})"/>

8、自定義日期的第一天

<input class="Wdate" type="text" id="d17" οnfοcus="WdatePicker({firstDayOfWeek:1})"/>

9、起始日期

注意：日期格式必須與 realDateFmt 和realTimeFmt 一致

<input type="text" id="d221" onFocus="WdatePicker({startDate:'1980-05-01'})"/>

10、設(shè)置內(nèi)置參數(shù)

<input type="text" id="d233" onFocus="WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true})"/>

11、自定義樣式

<input type="text" id="d241" οnfοcus="WdatePicker({dateFmt:'yyyy年MM月dd日 HH時mm分ss秒'})" class="Wdate" style="width:300px"/>

?

<input type="text" id="d242" οnfοcus="WdatePicker({skin:'whyGreen',dateFmt:'H:mm:ss'})" class="Wdate"/>

12、雙日歷

<input class="Wdate" type="text" οnfοcus="WdatePicker({doubleCalendar:true,dateFmt:'yyyy-MM-dd'})"/>

注意:雙月日歷一般只用于包含年月日三個元素的場景,另外設(shè)置該屬性時,autoPickDate自動設(shè)置為true

?

日期范圍限制

1、靜態(tài)限制

<input id="d411" class="Wdate" type="text" οnfοcus="WdatePicker({skin:'whyGreen',minDate:'2006-09-10',maxDate:'2008-12-20'})"/>

?

限制日期的范圍是 2006-09-10到2008-12-20

<input type="text" class="Wdate" id="d412" οnfοcus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'2008-03-08 11:30:00',maxDate:'2008-03-10 20:59:30'})" value="2008-03-09 11:00:00"/>

限制日期的范圍是 2008-3-8 11:30:00 到 2008-3-10 20:59:30

<input type="text" class="Wdate" id="d413" οnfοcus="WdatePicker({dateFmt:'yyyy年M月',minDate:'2008-2',maxDate:'2008-10'})"/>

?限制日期的范圍是 2008年2月 到 2008年10月

<input type="text" class="Wdate" id="d414" οnfοcus="WdatePicker({dateFmt:'H:mm:ss',minDate:'8:00:00',maxDate:'11:30:00'})"/>

限制日期的范圍是 8:00:00 到 11:30:00

2、動態(tài)限制

只能選擇今天以前的日期(包括今天)

<input id="d421" class="Wdate" type="text" οnfοcus="WdatePicker({skin:'whyGreen',maxDate:'%y-%M-%d'})"/>

?使用了運(yùn)算表達(dá)式?只能選擇今天以后的日期(不包括今天)

<input id="d422" class="Wdate" type="text" οnfοcus="WdatePicker({minDate:'%y-%M-{%d+1}'})"/>

?

只能選擇本月的日期1號至本月最后一天

<input id="d423" class="Wdate" type="text" οnfοcus="WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld'})"/>

只能選擇今天7:00:00至明天21:00:00的日期

<input id="d424" class="Wdate" type="text" οnfοcus="WdatePicker({dateFmt:'yyyy-M-d H:mm:ss',minDate:'%y-%M-%d 7:00:00',maxDate:'%y-%M-{%d+1} 21:00:00'})"/>

使用了運(yùn)算表達(dá)式?只能選擇 20小時前 至 30小時后 的日期

<input id="d425" class="Wdate" type="text" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',minDate:'%y-%M-%d {%H-20}:%m:%s',maxDate:'%y-%M-%d {%H+30}:%m:%s'})"/>

3、腳本自定義限制

?前面的日期不能大于后面的日期且兩個日期都不能大于 2020-10-01

<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天 不能大于 后面的日期

<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月零2天 不能大于 后面的日期 且 前面日期都不能大于 2020-4-3減去3月零2天 后面日期 不能大于 2020-4-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'})"/>

4、無效天

<input id="d441" type="text" class="Wdate" onFocus="WdatePicker({disabledDays:[6]})"/>

?

5、無效日期

<input id="d442" type="text" class="Wdate" onFocus="WdatePicker({disabledDays:[0,6]})"/>

禁用 每個月份的 5日 15日 25日

<input id="d451" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:['5$']})"/>

禁用 所有早于2000-01-01的日期

<input id="d452" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:['^19']})"/>

?

設(shè)置起始時間

?

<div class="control-group">
　　<label class="control-label">競拍時間 : </label>
　　<div class="controls">
　　　　<input type="text" class="span6 m-wrap" name="tenderEndTime" id="bidTime" placeholder="請選擇時間" οnfοcus="WdatePicker({position:{left:0,top:-40},dateFmt:'yyyy-MM-dd HH:mm',readOnly:true,minDate:'%y-%M-%d 　　　　　　H:%m'})" value="" required="required">
　　</div>
</div>
<div class="control-group">
　　<label class="control-label">采購截止時間 : </label>
　　<div class="controls">
　　　　<input type="text" class="span6 m-wrap" name="tenderEndTime" id="endTime" placeholder="請選擇時間" οnfοcus="WdatePicker({position:{left:0,top:-40},dateFmt:'yyyy-MM-dd 　　　　　　　　　　　　 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?　　　　　　HH:mm',readOnly:true,minDate:'#F{$dp.$D(\'bidTime\')}'})" value="" required="required">
　　</div>
</div>

<div class="control-group">
　　<label class="control-label">收貨時間 : </label>
　　<div class="controls">
　　　　<input style="text-indent:10px;" id="reciveTime" class="span6 m-wrap" placeholder="請選擇時間" name="deliveryStartTime" οnfοcus="WdatePicker({position:{left:0,top:-40},dateFmt:'yyyy-MM-　　　　 ??　　　　　　　　 ? ? ? ??　　　　　　dd',readOnly:true,minDate:'#F{$dp.$D(\'endTime\')}'})" required="required"/>
　　</div>
</div>

?

轉(zhuǎn)載于:https://www.cnblogs.com/THONLY/p/6393702.html

總結(jié)

以上是生活随笔為你收集整理的My97DatePicker日历插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。