176142998

一. 簡介

1. 簡介

目前的版本是:4.0 正式版 發(fā)布于2008-05-30

2. 注意事項

• My97DatePicker目錄是一個整體,不可破壞里面的目錄結(jié)構(gòu),也不可對里面的文件改名,可以改目錄名
• My97DatePicker.htm是必須文件,不可刪除
• 各目錄及文件的用途:
  WdatePicker.js 配置文件,在調(diào)用的地方僅需使用該文件
  config.js 語言和皮膚配置文件
  calendar.js 日期庫主文件)
  My97DatePicker.htm 臨時頁面文件,不可刪除
  目錄lang 存放語言文件
  目錄skin 存放皮膚的相關(guān)文件
• 當WdatePicker.js里的屬性:$wdate=true時,在input里加上class="Wdate"就會在選擇框右邊出現(xiàn)日期圖標,如果您不喜歡這個樣式,可以把class="Wdate"去掉,另外也可以通過修改skin目錄下的WdatePicker.css文件來修改樣式

3. 支持的瀏覽器

IE 6.0+ , Firefox 2.0+ , Opera 9.5+ , Safari 3.0+

二. 功能及示例

1. 常規(guī)功能

1. 支持多種調(diào)用模式

   除了支持常規(guī)在input單擊或獲得焦點調(diào)用外,還支持使用其他的元素如:<img><div>等觸發(fā)WdatePicker函數(shù)來調(diào)用彈出日期框

   示例1-1-1 常規(guī)調(diào)用

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

   示例1-1-2 圖標觸發(fā)

   
   <input id="d12" type="text"/>
   <img onclick="WdatePicker({el:$dp.$('d12')})" src="../skin/datePicker.gif" width="16" height="22" align="absmiddle">
   注:$dp.$ 相當于 document.getElementById
   $dp.$ 的詳細用法可以參考內(nèi)置函數(shù)

2. 下拉,輸入,導航選擇日期

   年月時分秒輸入框都具備以下三種特性
   1. 通過導航圖標選擇
   
   
   2. 直接使用鍵盤輸入數(shù)字
   
   
   3. 直接從彈出的下拉框中選擇
   
   
   另:年份輸入框有智能提示功能,當用戶連續(xù)點擊同一個導航按鈕5次時,會自動彈出年份下拉框

3. 支持周顯示

   可以通過配置isShowWeek屬性決定是否限制周,并且在返回日期的時候還可以通過自帶的自定義事件和API函數(shù)返回選擇的周

   
   

   示例1-2-1 周顯示簡單應用

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

   示例1-2-2 利用onpicked事件把周賦值給另外的文本框

      您選擇了第 (W格式)周, 另外您可以使用WW格式: 周
   <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');}})"/>
   
   onpicked 用法詳見自定義事件
   $dp.cal.getP 用法詳見內(nèi)置函數(shù)
   

4. 只讀開關(guān),高亮周末功能

   設置readOnly屬性 true 或 false 可指定日期框是否只讀
   設置highLineWeekDay屬性 ture 或 false 可指定是否高亮周末

5. 操作按鈕自定義

   清空按鈕和今天按鈕,可以根據(jù)需要進行自定義,它們分別對應 isShowClear 和 isShowToday 默認值都是true

   示例1-5 禁用清空功能

   最好把readOnly置為true,否則即使隱藏了清空按鈕,用戶依然可以在輸入框里把值delete掉
   
   <input class="Wdate" type="text" id="d15" onFocus="WdatePicker({isShowClear:false,readOnly:true})"/>

6. 自動選擇顯示位置

   當控件處在頁面邊界時,它會自動選擇顯示的位置,所以沒有必要擔心彈出框會被頁面邊界遮住的問題了.

7. 自定義彈出位置

   當控件處在頁面邊界時,它會自動選擇顯示的位置.此外你還可以使用position參數(shù)對彈出位置做調(diào)整.

   
   

   示例1-6 通過position屬性,自定義彈出位置

   使用positon屬性指定,彈出日期的坐標為{left:100,top:50}
   
   <input class="Wdate" type="text" id="d16" onfocus="WdatePicker({position:{left:100,top:50}})"/>
   
   position屬性的詳細用法詳見屬性表

2. 特色功能

1. 平面顯示

   日期控件支持平面顯示功能,只要設置一下eCont屬性就可以把它當作日歷來使用了,無需觸發(fā)條件,直接顯示在頁面上

   
   

   示例2-1 平面顯示演示

   <div id="div1"></div>
   <script>
   WdatePicker({eCont:'div1',onpicked:function(dp){alert('你選擇的日期是:'+dp.cal.getDateStr())}})
   </script>
   
   $dp.cal.getDateStr 用法詳見內(nèi)置函數(shù)

2. 支持多種容器

   除了可以將值返回給input以外,還可以通過配置el屬性將值返回給其他的元素(如:textarea,div,span)等,帶有innerHTML屬性的HTML元素

   示例2-2 將日期返回到<span>中

   2008-01-01
   
   代碼:
   <span id="demospan">2008-01-01</span>
   <img onClick="WdatePicker({el:'demospan'})" src="../../My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle" style="cursor:pointer" />

3. 起始日期功能
   注意:日期格式必須與 realDateFmt 和 realTimeFmt 一致

   有時在項目中需要選擇生日之類的日期,而默認點開始日期都是當前日期,導致年份選擇非常麻煩,你可以通過起始日期功能加上配置alwaysUseStartDate屬性輕松解決此類問題

   示例2-3-1 起始日期簡單應用

   默認的起始日期為 1980-05-01
   當日期框為空值時,將使用 1980-05-01 做為起始日期
   
   
   <input type="text" id="d221" onFocus="WdatePicker({startDate:'1980-05-01'})"/>

   示例2-3-2 alwaysUseStartDate屬性應用

   默認的起始日期為 1980-05-01
   當日期框無論是何值,始終使用 1980-05-01 做為起始日期
   
   
   <input type="text" id="d222" onFocus="WdatePicker({startDate:'1980-05-01',alwaysUseStartDate:true})"/>

   示例2-3-3 使用內(nèi)置參數(shù)

   除了使用靜態(tài)的日期值以外,還可以使用動態(tài)參數(shù)(如:%y,%M分別表示當前年和月)
   
   下例演示,年月日使用當年當月的1日,時分秒使用00:00:00作為起始時間
   
   
   <input type="text" id="d233" onFocus="WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true})"/>

4. 自定義格式

   yMdHmswW分別代表年月日時分秒星期周,你可以任意組合這些元素來自定義你個性化的日期格式.

   
   日期格式表

   格式	說明
   y	將年份表示為最多兩位數(shù)字。如果年份多于兩位數(shù)，則結(jié)果中僅顯示兩位低位數(shù)。
   yy	同上，如果小于兩位數(shù)，前面補零。
   yyy	將年份表示為三位數(shù)字。如果少于三位數(shù)，前面補零。
   yyyy	將年份表示為四位數(shù)字。如果少于四位數(shù)，前面補零。
   M	將月份表示為從 1 至 12 的數(shù)字
   MM	同上，如果小于兩位數(shù)，前面補零。
   d	將月中日期表示為從 1 至 31 的數(shù)字。
   dd	同上，如果小于兩位數(shù)，前面補零。
   H	將小時表示為從 0 至 23 的數(shù)字。
   HH	同上，如果小于兩位數(shù)，前面補零。
   m	將分鐘表示為從 0 至 59 的數(shù)字。
   mm	同上，如果小于兩位數(shù)，前面補零。
   s	將秒表示為從 0 至 59 的數(shù)字。
   ss	同上，如果小于兩位數(shù)，前面補零。
   w	返回星期對應的數(shù)字 0 (星期天) - 6 (星期六) 。
   D	返回星期的縮寫 一 至 六 (英文狀態(tài)下 Sun to Sat) 。
   W	返回周對應的數(shù)字 (1 - 53) 。
   WW	同上，如果小于兩位數(shù)，前面補零 (01 - 53) 。

   
   示例
   

   格式字符串	值
   yyyy-MM-dd HH:mm:ss	2008-03-12 19:20:00
   yy年M月	08年3月
   yyyyMMdd	20080312
   今天是:yyyy年M年d HH時mm分	今天是:2008年3月12日 19時20分
   H:m:s	19:20:0
   y年	8年

   示例 2-4-1: 年月日時分秒

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

   示例 2-4-2 時分秒

   
   <input type="text" id="d242" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'H:mm:ss'})" class="Wdate"/>
   
   注意:這里提前使用了皮膚(skin)屬性,所以你會看到一個不同的皮膚,皮膚屬性詳見自定義和動態(tài)切換皮膚

   示例 2-4-3 年月

   
   <input type="text" id="d243" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy年MM月'})" class="Wdate"/>

   示例 2-4-4 取得系統(tǒng)可識別的日期值(重要)

   類似于 1999年7月5日 這樣的日期是不能夠被系統(tǒng)識別的,他必須轉(zhuǎn)換為能夠識別的類型如 1999-07-05
   
   真實的日期值是:
   <input id="d244" type="text" class="Wdate" onfocus="WdatePicker({dateFmt:'yyyy年M月d日',vel:'d244_2'})"/>
   <input id="d244_2" type="text" />
   
   注意:在實際應用中,一般會把vel指定為一個hidden控件,這里是為了把真實值展示出來,所以使用文本框
   關(guān)鍵屬性: vel 指定一個控件或控件的ID,必須具有value屬性(如input),用于存儲真實值(也就是realDateFmt和realTimeFmt格式化后的值)

5. 編輯功能

   不知道您是否已經(jīng)注意到,當日期框里面有值時,右下角的按鈕會變成更新,修改完某個屬性后,只要點擊這個按鈕就可以實現(xiàn)時間和日期的編輯

   示例2-5 日期和時間的編輯演示

   您可以嘗試對下面框中的月份改為1,然后點擊更新,你會發(fā)現(xiàn)日期由 2000-02-29 01:00:00 變?yōu)?2000-01-29 01:00:00
   

6. 自動糾錯功能

   糾錯處理可設置為3種模式:提示(默認) 自動糾錯 標記,當日期框中的值不符合格式時,系統(tǒng)會嘗試自動修復,如果修復失敗會根據(jù)您設置的糾錯處理模式進行處理,錯誤判斷功能非常智能它可以保證用戶輸入的值是一個合法的值

   示例2-6-1 不合法的日期演示

   請在下面的日期框中填入一個不合法的日期(如:1997-02-29),再嘗試離開焦點
   使用默認容錯模式 提示模式 errDealMode = 0 在輸入錯誤日期時,會先提示
   
   
   注意:1997年不是閏年哦

   示例2-6-2 超出日期限制范圍的日期也被認為是一個不合法的日期

   最大日期是2000-01-10 ,如果在下框中填入的日期 大于 2000-01-10(如2000-01-12)也會被認為是不合法的日期
   自動糾錯模式 errDealMode = 1 在輸入錯誤日期時,自動恢復前一次正確的值
   

   示例2-6-3 使用無效天和無效日期功能限制的日期也被認為是一個不合法的日期

   如:
   2008-02-20 無效日期限制
   2008-02-02 2008-02-09 2008-02-16 2008-02-23 無效天限制
   都是無效日期
   您可以嘗試在下框中輸入這些日期,并離開焦點
   
   標記模式 errDealMode = 2 在輸入錯誤日期時,不做提示和更改,只是做一個標記,但此時日期框不會馬上隱藏
   
   
   注意:標記類:WdateFmtErr是在skin目錄下WdatePicker.css中定義的

7. 跨無限級框架顯示

   無論你把日期控件放在哪里,你都不需要擔心會被外層的iframe所遮擋進而影響客戶體驗,因為My97日期控件是可以跨無限級框架顯示的

   示例2-7 跨無限級框架演示

   可無限跨越框架iframe,無論怎么嵌套框架都不必擔心了,即使有滾動條也不怕

8. 民國年日歷和其他特殊日歷

   當年份格式設置為yyy格式時,利用年份差量屬性yearOffset(默認值1911民國元年),可實現(xiàn)民國年日歷和其他特殊日歷

   示例2-8 民國年演示

   
   <input type="text" id="d28" onClick="WdatePicker({dateFmt:'yyy/MM/dd'})"/>
   
   注意:年份格式設置成yyy時,真正的日期將會減去一個差量yearOffset(默認值為:1911),如果是民國年使用默認值即可無需另外配置,如果是其他的差量,可以通過參數(shù)的形式配置

9. 為編程帶來方便

   如果el的值是this,可省略,即所有的el:this都可以不寫
   日期框設置為disabled時,禁止更改日期(不彈出選擇框)
   如果沒有定義onpicked事件,自動觸發(fā)文本框的onchange事件
   如果沒有定義oncleared事件,清空時,自動觸發(fā)onchange事件

10. 其他屬性

    設置readOnly屬性,可指定日期框是否只讀
    設置highLineWeekDay屬性,可指定是否高亮周末
    設置isShowOthers屬性,可指定是否顯示其他月的日期
    加上class="Wdate"就會在選擇框右邊出現(xiàn)日期圖標

3. 多語言和自定義皮膚

1. 多語言支持

   通過lang屬性,可以為每個日期控件單獨配置語言,當然也可以通過WdatePicker.js配置全局的語言
   語言列表和語言安裝說明詳見語言配置

   示例3-1 多語言示例

   繁體中文:
   <input id="d311" class="Wdate" type="text" onFocus="WdatePicker({lang:'zh-tw'})"/>

   英文:
   <input id="d312" class="Wdate" type="text" onFocus="WdatePicker({lang:'en'})"/>

   簡體中文:
   <input id="d313" class="Wdate" type="text" onFocus="WdatePicker({lang:'zh-cn'})"/>
   
   注意:默認情況lang='auto',即根據(jù)瀏覽器的語言自動選擇語言.

2. 自定義和動態(tài)切換皮膚

   通過skin屬性,可以為每個日期控件單獨配置皮膚,當然也可以通過WdatePicker.js配置全局的皮膚
   皮膚列表和皮膚安裝說明詳見皮膚配置

   示例3-2 皮膚演示

   默認皮膚default: skin:'default'
   
   <input id="d321" class="Wdate" type="text" onfocus="WdatePicker()"/>
   
   注意:在WdatePicker里配置了skin='default',所以此處可省略,同理,如果你把WdatePicker里的skin配置成'whyGreen'那么在不指定皮膚的情況下都使用'whyGreen'皮膚了

   
   whyGreen皮膚: skin:'whyGreen'
   
   <input id="d322" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen'})"/>

4. 日期范圍限制

1. 靜態(tài)限制
   注意:日期格式必須與 realDateFmt 和 realTimeFmt 一致

   你可以給通過配置minDate(最小日期),maxDate(最大日期)為靜態(tài)日期值,來限定日期的范圍

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

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

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

   
   <input type="text" class="Wdate" id="d412" onfocus="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"/>

   示例4-1-3 限制日期的范圍是 2008年2月 到 2008年10月

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

   示例4-1-4 限制日期的范圍是 8:00:00 到 11:30:00

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

2. 動態(tài)限制
   注意:日期格式必須與 realDateFmt 和 realTimeFmt 一致

   你可以通過系統(tǒng)給出的動態(tài)變量,如%y(當前年),%M(當前月)等來限度日期范圍,你還可以通過#{}進行表達式運算,如:#{%d+1}:表示明天
   
   動態(tài)變量表

   格式	說明
   %y	當前年
   %M	當前月
   %d	當前日
   %ld	本月最后一天
   %H	當前時
   %m	當前分
   %s	當前秒
   #{}	運算表達式,如:#{%d+1}:表示明天
   #F{}	{}之間是函數(shù)可寫自定義JS代碼

   示例4-2-1 只能選擇今天以前的日期(包括今天)

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

   示例4-2-2 使用了運算表達式 只能選擇今天以后的日期(不包括今天)

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

   示例4-2-3 只能選擇本月的日期1號至本月最后一天

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

   示例4-2-4 只能選擇今天7:00:00至明天21:00:00的日期

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

   示例4-2-5 使用了運算表達式 只能選擇 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. 腳本自定義限制
   注意:日期格式必須與 realDateFmt 和 realTimeFmt 一致

   系統(tǒng)提供了$dp.$D和$dp.$DV這兩個API來輔助你進行日期運算,此外你還可以通過在 #F{} 中填入你自定義的腳本,做任何你想做的日期限制

   示例4-3-1 前面的日期不能大于后面的日期且兩個日期都不能大于 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'})"/>
   
   注意:
   兩個日期的日期格式必須相同
   
   $dp.$ 相當于 document.getElementById 函數(shù).
   那么為什么里面的 ' 使用 \' 呢? 那是因為 " 和 ' 都被外圍的函數(shù)使用了,故使用轉(zhuǎn)義符 \ ,否則會提示JS語法錯誤.
   所以您在其他地方使用時注意把 \' 改成 " 或者 ' 來使用.
   
   #F{$dp.$D(\'d4312\')||\'2020-10-01\'} 表示當 d4312 為空時, 采用 2020-10-01 的值作為最大值
   

   示例4-3-2 前面的日期+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});}'})"/>
   
   使用 $dp.$D 函數(shù) 可以將日期框中的值,加上定義的日期差量:
   兩個參數(shù): id={字符類型}需要處理的文本框的id值 , obj={對象類型}日期差量
   日期差量用法:
   屬性y,M,d,H,m,s分別代表年月日時分秒
   如
   為空時,表示直接取值,不做差量(示例4-3-1中的參數(shù)就是空的)
   {M:5,d:7} 表示 五個月零7天
   {y:1,d:-3} 表示 1年少3天
   {d:1,H:1} 表示一天多1小時

   示例4-3-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'})"/>
   
   注意:
   #F{$dp.$D(\'d4332\',{M:-3,d:-2}) || $dp.$DV(\'2020-4-3\',{M:-3,d:-2})}
   表示當 d4332 為空時, 采用 $dp.$DV(\'2020-4-3\',{M:-3,d:-2})} 的值作為最大值

   使用 $dp.$DV 函數(shù) 可以將顯式傳入的值,加上定義的日期差量:
   兩個參數(shù): value={字符類型}需要處理的值 , obj={對象類型}日期差量
   用法同上面的 $dp.$D 類似,如 $dp.$DV(\'2020-4-3\',{M:-3,d:-2}) 表示 2020-4-3減去3月零2天

   示例4-3-4 發(fā)揮你的JS才能,定義任何你想要的日期限制

   自動轉(zhuǎn)到隨機生成的一天,當然,此示例沒有實際的用途,只是為演示目的
   
   <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. 無效天

   可以使用此功能禁用周日至周六所對應的日期,相關(guān)屬性:disabledDays (0至6 分別代表 周日至周六)

   示例4-4-1 禁用 周六 所對應的日期

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

   示例4-4-2 通過position屬性,自定義彈出位置

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

5. 無效日期
   注意:日期格式必須與 realDateFmt 和 realTimeFmt 一致

   可以使用此功能禁用,所指定的一個或多個日期,只要你熟悉正則表達式,你可以盡情發(fā)揮
   
   用法(正則匹配):
   如果你熟悉正則表達式,會很容易理解下面的匹配用法
   如果不熟悉,可以參考下面的常用示例
   ['2008-02-01','2008-02-29'] 表示禁用 2008-02-01 和 2008-02-29
   ['2008-..-01','2008-02-29'] 表示禁用 2008-所有月份-01 和 2008-02-29
   ['200[0-8]]-02-01','2008-02-29'] 表示禁用 [2000至2008]-02-01 和 2008-02-29
   ['^2006'] 表示禁用 2006年的所有日期

   此外,您還可以使用 %y %M %d %H %m %s 等變量, 用法同動態(tài)日期限制 注意:%ld不能使用
   ['....-..-01','%y-%M-%d'] 表示禁用 所有年份和所有月份的第一天和今天
   ['%y-%M-#{%d-1}','%y-%M-#{%d+1}'] 表示禁用 昨天和明天

   當然,除了可以限制日期以外,您還可以限制時間
   ['....-..-.. 10\:00\:00'] 表示禁用 每天10點 (注意 : 需要 使用 \: )

   不再多舉例了,盡情發(fā)揮你的正則才能吧!

   示例4-5-1 禁用 每個月份的 5日 15日 25日

   
   <input id="d451" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:['5$']})"/>
   
   注意 :'5$' 表示以 5 結(jié)尾 注意 $ 的用法

   示例4-5-2 禁用 所有早于2000-01-01的日期

   
   <input id="d452" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:['^19']})"/>
   
   注意:'^19' 表示以 19 開頭 注意 ^ 的用法
   當然,可以使用minDate實現(xiàn)類似的功能 這里主要是 在演示 ^ 的用法

   示例4-5-3 配合min/maxDate使用,可以把可選擇的日期分隔成多段

   本示例本月可用日期分隔成五段 分別是: 1-3 8-10 16-24 26,27 29-月末
   
   <input id="d453" type="text" class="Wdate" onFocus="WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld',disabledDates:['0[4-7]$','1[1-5]$','2[58]$']})"/>

   示例4-5-4 min/maxDate disabledDays disabledDates 配合使用 即使在要求非常苛刻的情況下也能滿足需求

   
   <input id="d454" type="text" class="Wdate" onFocus="WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld',disabledDates:['0[4-7]$','1[1-5]$','2[58]$'],disabledDays:[1,3,6]})"/>

   示例4-5-5 禁用前一個小時和后一個小時內(nèi)所有時間 使用 %y %M %d %H %m %s 等變量

   鼠標點擊 小時輸入框時,你會發(fā)現(xiàn)當然時間對應的前一個小時和后一個小時是灰色的
   
   <input id="d2a25" type="text" class="Wdate" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',disabledDates:['%y-%M-%d #{%H-1}\:..\:..','%y-%M-%d #{%H+1}\:..\:..']})"/>
   
   注意:%y %M %d等詳見動態(tài)變量表

   示例4-5-6 #F{}也是可以使用的

   本示例利用自定義函數(shù) 隨機禁用0-23中的任何一個小時
   打開小時選擇框,你會發(fā)現(xiàn)有一個小時被禁用的,而且每次禁用的小時都不同
   
   <script>
   function randomH(){
   //產(chǎn)生一個隨機的數(shù)字 0-23
   var H = Math.round(Math.random() * 23);
   if(H<10) H='0'+H;
   //返回 '^' + 數(shù)字
   return '^'+H;
   }
   </script>
   <input type="text" class="Wdate" id="d456" onFocus="WdatePicker({dateFmt:'HH:mm:ss',disabledDates:['#F{randomH()}']})"/>

6. 有效天與有效日期

   使用無效天和無效日期可以很方便的禁用不可用的日期,但是在只需要啟用少部分日期的情況下,有效天和有效日期的功能就非常適合了.
   關(guān)鍵屬性: opposite 默認為false, 為true時,無效天和無效日期變成有效天和有效日期

   示例4-6 只啟用 每個月份的 5日 15日 25日

   
   <input id="d46" type="text" class="Wdate" onFocus="WdatePicker({opposite:true,disabledDates:['5$']})"/>
   
   注意 :'5$' 表示以 5 結(jié)尾 注意 $ 的用法

5. 自定義事件

1. 自定義事件

   如果你需要做一些附加的操作,你也不必擔心,日期控件自帶的自定義事件可以滿足你的需求.此外,你還可以在自定義事件中調(diào)用提供的API庫來做更多的運算和擴展,絕對可以通過很少的代碼滿足你及其個性化的需求.
   
   注意下面幾個重要的指針,將對你的編程帶來很多便利
   this: 指向文本框
   dp: 指向$dp
   dp.cal: 指向日期控件對象
   注意:函數(shù)原型必須使用類似 function(dp){} 的模式,這樣子,在函數(shù)內(nèi)部才可以使用dp

2. onpicking 和 onpicked 事件

   示例5-2-1 onpicking事件演示

   
   <input type="text" id="5421" onFocus="WdatePicker({onpicking:function(dp){if(!confirm('日期框原來的值為: '+dp.cal.getDateStr()+', 要覆蓋嗎?')) return true;}})" class="Wdate"/>
   
   注意:dp.cal.getDateStr是一個內(nèi)置函數(shù)

   示例5-2-2 使用onpicked實現(xiàn)日期選擇聯(lián)動

   選擇第一個日期的時候,第二個日期選擇框自動彈出
   日期從: 至
   注意:下面第一個控件代碼的寫法
   <input id="d5221" class="Wdate" type="text" onFocus="var d5222=$dp.$('d5222');WdatePicker({onpicked:function(){d5222.focus();},maxDate:'#F{$dp.$D(\'d5222\')}'})"/>
   至
   <input id="d5222" class="Wdate" type="text" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d5221\')}'})"/>
   
   注意:$dp.$是一個內(nèi)置函數(shù),相當于document.getElementById

   示例5-2-3 將選擇的值拆分到文本框

   年 月 日 時 分 秒
   <input type="text" id="d523_y" size="5"/> 年
   <input type="text" id="d523_M" size="3"/> 月
   <input type="text" id="d523_d" size="3"/> 日
   <input type="text" id="d523_HH" size="3"/> 時
   <input type="text" id="d523_mm" size="3"/> 分
   <input type="text" id="d523_ss" size="3"/> 秒
   <img onclick="WdatePicker({el:'d523',dateFmt:'yyyy-MM-dd HH:mm:ss',onpicked:pickedFunc})" src="../../My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle" style="cursor:pointer"/>
   <script>
   function pickedFunc(){
   $dp.$('d523_y').value=$dp.cal.getP('y');
   $dp.$('d523_M').value=$dp.cal.getP('M');
   $dp.$('d523_d').value=$dp.cal.getP('d');
   $dp.$('d523_HH').value=$dp.cal.getP('H');
   $dp.$('d523_mm').value=$dp.cal.getP('m');
   $dp.$('d523_ss').value=$dp.cal.getP('s');
   }
   </script>
   
   注意:el:'d523'中,如果你不需要d523這個框,你可以把他改成hidden,但是el屬性必須指定
   $dp.$和$dp.cal.getP都是內(nèi)置函數(shù)

3. onclearing 和 oncleared 事件

   示例5-3-1 使用onclearing事件取消清空操作

   
   <input type="text" class="Wdate" id="d531" onFocus="WdatePicker({onclearing:function(){if(!confirm('日期框的值為:'+this.value+', 確實要清空嗎?'))return true;}})"/>
   
   注意:當onclearing函數(shù)返回true時,系統(tǒng)的清空事件將被取消,
   函數(shù)體里面沒有引用$dp,所以函數(shù)原型里面可以省略參數(shù)dp

   示例5-3-2 使用cal對象取得當前日期所選擇的月份(使用了 dp.cal)

   
   <input type="text" class="Wdate" id="d532" onFocus="WdatePicker({oncleared:function(dp){alert('當前日期所選擇的月份為:'+dp.cal.date.M);}})"/>

   示例5-3-3 綜合使用兩個事件

   
   <script>
   function d533_focus(element){
   var clearingFunc = function(){ if(!confirm('日期框的值為:'+this.value+', 確實要清空嗎?')) return true; }
   var clearedFunc = function(){ alert('日期框已被清空'); }
   WdatePicker({el:element,onclearing:clearingFunc,oncleared:clearedFunc})
   }
   </script>
   <input type="text" class="Wdate" id="d533" onFocus="d533_focus(this)"/>

6. 快速選擇功能

此功能允許指定5個最常用的日期,可以方便用戶選擇,如果不指定,系統(tǒng)將自動生成
相關(guān)屬性:
qsEnabled 是否啟用快速選擇功能
quickSel 快速選擇數(shù)據(jù),可以傳入5個快速選擇日期,日期格式同min/maxDate

注意:
日期格式必須與 realDateFmt realTimeFmt 相匹配
除了使用靜態(tài)的日期值以外,還可以使用動態(tài)參數(shù)(如:%y,%M分別表示當前年和月)

三. 配置說明

1. 屬性配置

1. 屬性表

   屬性	類型	默認值	說明
   靜態(tài)屬性:只能在WdatePicker.js中配置,一般情況下,不建議您修改靜態(tài)屬性的值
   $wdate	bool	true	是否自動引入Wdate類 設置為true時,可直接在引入WdatePicker.js的頁面里使用 class="Wdate" Wdate可在skin目錄下的WdatePicker.css文件中定義 建議使用默認值
   $dpPath	string	''	是否顯示指定程序包的絕對位置,一般情況下為空即可(程序自動創(chuàng)建),該屬性是為防止極其少數(shù)的情況下程序創(chuàng)建出錯而設置的 設置方法: 如果,程序包所在http中的地址為 http://localhost/proName/My97DatePicker/ 則 $dpPath = '/proName/My97DatePicker/'; 建議使用默認值
   可配置屬性:可以在WdatePicker方法是配置
   el	Element 或 String	null	指定一個控件或控件的ID,必須具有value或innerHTML屬性(如input,textarea,span,div,p等標簽都可以),用戶存儲日期顯示值(也就是dateFmt格式化后的值)
   vel	Element 或 String	null	指定一個控件或控件的ID,必須具有value屬性(如input),用于存儲真實值(也就是realDateFmt和realTimeFmt格式化后的值)
   position	object	{}	日期選擇框顯示位置 注意:坐標默認單位是px,是相對當前框架坐標(不受滾動條),left屬性只接受數(shù)字,top屬性除接受數(shù)字外還可以接受 'above' 上方顯示, 'under' 下方顯示, 'auto' 系統(tǒng)根據(jù)頁面大小自動選擇(默認) 如: {left:100,top:50}表示固定坐標[100,50] {top:50}表示橫坐標自動生成,縱坐標指定為 50 {left:100}表示縱坐標自動生成,橫坐標指定為 100 {top:'above'}表示上方顯示 {top:'under'}表示下方顯示 請參考示例
   lang	string	'auto'	當值為'auto'時 自動根據(jù)客戶端瀏覽器的語言自動選擇語言 當值為 其他 時 從langList中選擇對應的語言 你可以參考語言配置
   skin	string	'default'	皮膚名稱 默認自帶 default和whyGreen兩個皮膚 另外如果你的css夠強的話,可以自己做皮膚 你可以參考皮膚配置
   dateFmt	string	'yyyy-MM-dd'	日期顯示格式 你可以參考自定義格式
   realDateFmt	string	'yyyy-MM-dd'	計算機可識別的,真正的日期格式 無效日期設置(disabledDates),最大日期(maxDate),最小日期(minDate)以及快速日期都必須與它們相匹配 建議使用默認值
   realTimeFmt	string	'HH:mm:ss'
   realFullFmt	string	'%Date %Time'
   minDate	string	'1900-01-01 00:00:00'	最小日期(注意要與上面的real日期相匹配)
   maxDate	string	'2099-12-31 23:59:59'	最大日期(注意要與上面的real日期相匹配)
   startDate	string	''	起始日期,既點擊日期框時顯示的起始日期 為空時,使用今天作為起始日期(默認值) 否則使用傳入的日期作為起始日期(注意要與上面的real日期相匹配) 你可以參考起始日期示例
   isShowWeek	bool	false	是否顯示周 你可以參考周顯示示例
   highLineWeekDay	bool	true	是否高亮顯示 周六 周日
   isShowClear	bool	true	是否顯示清空按鈕
   isShowToday	bool	true	是否顯示今天按鈕
   isShowOthers	bool	true	為true時,第一行空白處顯示上月的日期，末行空白處顯示下月的日期,否則不顯示
   readOnly	bool	false	是否只讀
   errDealMode	int	0	糾錯模式設置 可設置3中模式 0 - 提示 1 - 自動糾錯 2 - 標記
   autoPickDate	bool	null	為false時 點日期的時候不自動輸入,而是要通過確定才能輸入 為true時 即點擊日期即可返回日期值 為null時(推薦使用) 如果有時間置為false 否則置為true
   qsEnabled	bool	true	是否啟用快速選擇功能
   quickSel	Array	null	快速選擇數(shù)據(jù),可以傳入5個快速選擇日期 注意:日期格式必須與 realDateFmt realTimeFmt realFullFmt 相匹配 你可以參考快速選擇示例
   disabledDays	Array	null	可以使用此功能禁用周日至周六所對應的日期 0至6 分別代表 周日至周六 你可以參考無效天示例
   disabledDates	Array	null	可以使用此功能禁用所指定的一個或多個日期 你可以參考無效日期示例
   opposite	bool	false	默認為false, 為true時,無效天和無效日期變成有效天和有效日期 你可以參考有效天與有效日期示例
   onpicking	function	null	此四個參數(shù)為事件參數(shù) 你可以參考自定義事件示例
   onpicked	function	null
   onclearing	function	null
   oncleared	function	null

2. 配置全局默認值

   通過配置WdatePicker.js的屬性可以避免每次調(diào)用都傳入配置值,為變成帶來很多方便.
   在默認情況下My97為每個屬性都配置了默認值,這些默認值都可以在WdatePicker.js中修改的
   你可以根據(jù)你個人的喜好更改這些值
   
   比如你比較不喜歡默認的皮膚default 而更喜歡 whyGreen 這個皮膚,
   你可以直接在WdatePicker.js把skin值改為 whyGreen
   這樣,你就不必每次調(diào)用控件的時候都傳入 skin:'whyGreen' 了
   你學會了嗎?

3. 配置單個控件

   在控件里面你可以使用 onfocus 或 onclick 事件來調(diào)用WdatePicker函數(shù)來觸發(fā)日期控件
   WdatePicker({})其中{}中的內(nèi)容都是只對當前實例有效,你可以任意配置屬性表里有的所有屬性
   你可以隨意的組合這些屬性,達到你的需求
   My97日期控件在這方面是做得非常靈活的.

2. 語言配置

1. 語言列表

   My97DatePicker目錄下有個config.js,里面有段代碼:
   var langList =
   [
   {name:'en', charset:'UTF-8'},
   {name:'zh-cn', charset:'gb2312'},
   {name:'zh-tw', charset:'GBK'}
   ];
   
   這就是語言列表,每個項有name和charset兩個屬性.
   name 表示語言的名稱(必須與瀏覽器的語言字符串命名相同),在配置的時候,lang屬性只能是配置列表里面已有的項,否則將自動返回第一項
   charset 表示對應語言目錄下的js文件所對應的編碼格式

2. 語言安裝說明

   分兩步輕松實現(xiàn):
   1 將語言文件拷貝到 lang 目錄
   2 打開 config.js 配置語言列表

3. 皮膚配置

1. 皮膚列表

   My97DatePicker目錄下有個config.js,里面有段代碼:
   var skinList =
   [
   {name:'default', charset:'gb2312'},
   {name:'whyGreen', charset:'gb2312'},
   {name:'blue', charset:'gb2312'},
   {name:'simple', charset:'gb2312'}
   ];
   
   這就是皮膚列表,每個項有name和charset兩個屬性.
   name 表示皮膚的名稱,在配置的時候,skin屬性只能是配置列表里面已有的項,否則將自動返回第一項
   charset 表示對應皮膚目錄下的css文件:datepicker.css所對應的編碼格式

2. 皮膚安裝說明

   分兩步輕松實現(xiàn):
   1 將皮膚文件包拷貝到 skin 目錄
   2 打開 config.js 配置皮膚列表
   
   注意:安裝過多的皮膚會影響效率,一般5個以下比較適宜

四. 如何使用

1. 在使用該日期控件的文件中加入JS庫(僅這一個文件即可,其他文件會自動引入,請勿刪除或改名), 代碼如下 <script language="javascript" type="text/javascript" src="datepicker/WdatePicker.js"></script>
注:src="datepicker/WdatePicker.js" 請根據(jù)你的實際情況改變路徑

2. 加上主調(diào)函數(shù) WdatePicker
關(guān)于 WdatePicker 的用法:

如果您是新手,對js還不是很了解的話一定要多看看這份文檔
基本上每一個演示的示例下面都有相關(guān)代碼,并且 關(guān)鍵屬性用藍字標出,關(guān)鍵值用紅字標出 應該很容易看明白

如果您有一定的水準
希望能從頭到尾把功能介紹好好看一遍,這樣大部分功能你都會用了

如果您是高手
建議您通讀配置說明和內(nèi)置函數(shù)

五. 內(nèi)置函數(shù)

六. 疑難解答

任何問題,請先參考blog里的帖子 My97 DatePicker 4.0 疑難解答(實時更新)
如果找不到答案,您可以直接在blog留言,或者通過下面的聯(lián)系方式與我聯(lián)系

七. 聯(lián)系My97

* 如果您在使用過程中遇到問題,或者有更好的建議
* 歡迎您訪問
* BLOG: http://blog.csdn.net/my97/
* MAIL: smallcarrot@163.com
* 有問題在我blog留言或給我Email吧,最好先仔細看說明,很多問題都是因為沒有仔細看說明導致的