一. 簡介

1. 簡介

目前的版本是:4.2 正式版 釋出於2008-12-03

2. 注意事項

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

3. 支援的瀏覽器

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

二. 功能及示例

1. 常規功能

1. 1.           支援多種呼叫模式

除了支援常規在input單擊或獲得焦點呼叫外,還支援使用其他的元素如:<img><div>等觸發WdatePicker函式來呼叫彈出日期框

示例1-1-1 常規呼叫

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

示例1-1-2 圖示觸發

<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.$ 的詳細用法可以參考

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

年月時分秒輸入框都具備以下三種特性
1. 通過導航圖示選擇


2. 直接使用鍵盤輸入數字


3. 直接從彈出的下拉框中選擇


另:年份輸入框有智慧提示功能,當用戶連續點選同一個導航按鈕5次時,會自動彈出年份下拉框

1. 3.           支援周顯示

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

示例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 用法詳見內建函式

1. 4.           只讀開關,高亮週末功能

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

1. 5.           操作按鈕自定義

清空按鈕和今天按鈕,可以根據需要進行自定義,它們分別對應 isShowClear 和 isShowToday 預設值都是true

示例1-5 禁用清空功能

最好把readOnly置為true,否則即使隱藏了清空按鈕,使用者依然可以在輸入框裡把值delete掉

<input class="Wdate" type="text" id="d15" onFocus="WdatePicker({isShowClear:false,readOnly:true})"/>

1. 6.           自動選擇顯示位置

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

1. 7.           自定義彈出位置

當控制元件處在頁面邊界時,它會自動選擇顯示的位置.此外你還可以使用position引數對彈出位置做調整.

示例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. 1.           平面顯示

日期控制元件支援平面顯示功能,只要設定一下eCont屬性就可以把它當作日曆來使用了,無需觸發條件,直接顯示在頁面上

示例2-1 平面顯示演示

<div id="div1"></div>
<script>
WdatePicker({eCont:'div1',onpicked:function(dp){alert('你選擇的日期是:'+dp.cal.getDateStr())}})
</script>

$dp.cal.getDateStr 用法詳見內建函式

1. 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="http://www.cnblogs.com/My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle" style="cursor:pointer" />

1. 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 使用內建引數

除了使用靜態的日期值以外,還可以使用動態引數(如:%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})"/>

1. 4.           自定義格式

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

日期格式表

示例

示例 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)屬性,所以你會看到一個不同的面板,面板屬性詳見自定義和動態切換面板

示例 2-4-3 年月

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

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

類似於 1999年7月5日 這樣的日期是不能夠被系統識別的,他必須轉換為能夠識別的型別如 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控制元件,這裡是為了把真實值展示出來,所以使用文字框
關鍵屬性: vel 指定一個控制元件或控制元件的ID,必須具有value屬性(如input),用於儲存真實值(也就是realDateFmt和realTimeFmt格式化後的值)

1. 5.           編輯功能

當日期框裡面有值時,修改完某個屬性後,只要點選這個按鈕就可以實現時間和日期的編輯

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

您可以嘗試對下面框中的月份改為1,然後點選更新,你會發現日期由 2000-02-29 01:00:00 變為 2000-01-29 01:00:00

1. 6.           自動糾錯功能

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

示例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中定義的

1. 7.           跨無限級框架顯示

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

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

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

1. 8.           民國年日曆和其他特殊日曆

當年份格式設定為yyy格式時,利用年份差量屬性yearOffset(預設值1911民國元年),可實現民國年日曆和其他特殊日曆

示例2-8 民國年演示

<input type="text" id="d28" onClick="WdatePicker({dateFmt:'yyy/MM/dd'})"/>

注意:年份格式設定成yyy時,真正的日期將會減去一個差量yearOffset(預設值為:1911),如果是民國年使用預設值即可無需另外配置,如果是其他的差量,可以通過引數的形式配置

1. 9.           為程式設計帶來方便

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

1. 10.        其他屬性

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

3. 多語言和自定義面板

1. 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',即根據瀏覽器的語言自動選擇語言.

1. 2.           自定義和動態切換面板 立刻轉到面板中心

通過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. 1.           靜態限制
   注意:日期格式必須與 realDateFmt 和 realTimeFmt 一致

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

示例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'})"/>

1. 2.           動態限制
   注意:日期格式必須與 realDateFmt 和 realTimeFmt 一致

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

動態變量表

示例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'})"/>

1. 3.           指令碼自定義限制
   注意:日期格式必須與 realDateFmt 和 realTimeFmt 一致

系統提供了$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 函式.
那麼為什麼裡面的 ' 使用 \' 呢? 那是因為 " 和 ' 都被外圍的函式使用了,故使用轉義符 \ ,否則會提示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 函式 可以將日期框中的值,加上定義的日期差量:
兩個引數: id={字元型別}需要處理的文字框的id值 , obj={物件型別}日期差量
日期差量用法:
屬性y,M,d,H,m,s分別代表年月日時分秒
如
為空時,表示直接取值,不做差量(示例4-3-1中的引數就是空的)
{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 函式 可以將顯式傳入的值,加上定義的日期差量:
兩個引數: value={字元型別}需要處理的值 , obj={物件型別}日期差量
用法同上面的 $dp.$D 類似,如 $dp.$DV(\'2020-4-3\',{M:-3,d:-2}) 表示 2020-4-3減去3月零2天

示例4-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})"/>

1. 4.           無效天

可以使用此功能禁用週日至週六所對應的日期,相關屬性: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]})"/>

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

可以使用此功能禁用,所指定的一個或多個日期,只要你熟悉正則表示式,你可以盡情發揮

用法(正則匹配):
如果你熟悉正則表示式,會很容易理解下面的匹配用法
如果不熟悉,可以參考下面的常用示例
['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 等變數, 用法同動態日期限制 注意:%ld不能使用
['....-..-01','%y-%M-%d'] 表示禁用 所有年份和所有月份的第一天和今天
['%y-%M-#{%d-1}','%y-%M-#{%d+1}'] 表示禁用 昨天和明天

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

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

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

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

注意 :'5$' 表示以 5 結尾 注意 $ 的用法

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

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

注意:'^19' 表示以 19 開頭 注意 ^ 的用法
當然,可以使用minDate實現類似的功能 這裡主要是在演示 ^ 的用法

示例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 禁用前一個小時和後一個小時內所有時間使用 %y %M %d %H %m %s 等變數

滑鼠點選 小時輸入框時,你會發現當然時間對應的前一個小時和後一個小時是灰色的

<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等詳見動態變量表

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

本示例利用自定義函式 隨機禁用0-23中的任何一個小時
開啟小時選擇框,你會發現有一個小時被禁用的,而且每次禁用的小時都不同

<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()}']})"/>

1. 6.           有效天與有效日期

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

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

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

注意 :'5$' 表示以 5 結尾 注意 $ 的用法

5. 自定義事件

1. 1.           自定義事件

如果你需要做一些附加的操作,你也不必擔心,日期控制元件自帶的自定義事件可以滿足你的需求.此外,你還可以在自定義事件中呼叫提供的API庫來做更多的運算和擴充套件,絕對可以通過很少的程式碼滿足你及其個性化的需求.

注意下面幾個重要的指標,將對你的程式設計帶來很多便利
this: 指向文字框
dp: 指向$dp
dp.cal: 指向日期控制元件物件
注意:函式原型必須使用類似 function(dp){} 的模式,這樣子,在函式內部才可以使用dp

1. 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是一個內建函式

示例5-2-2 使用onpicked實現日期選擇聯動

選擇第一個日期的時候,第二個日期選擇框自動彈出
日期從: 至
注意:下面第一個控制元件程式碼的寫法
<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.$是一個內建函式,相當於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="http://www.cnblogs.com/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都是內建函式

1. 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函式返回true時,系統的清空事件將被取消,
函式體裡面沒有引用$dp,所以函式原型裡面可以省略引數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個最常用的日期,可以方便使用者選擇,如果不指定,系統將自動生成
相關屬性:
qsEnabled 是否啟用快速選擇功能
quickSel 快速選擇資料,可以傳入5個快速選擇日期,日期格式同min/maxDate

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

示例6-1 傳入2個靜態日期

<input class="Wdate" type="text" onfocus="WdatePicker({dateFmt:'yyyy年MM月dd日',qsEnabled:true,quickSel:['2000-1-10','2000-2-20']})"/>

注意:當傳入的資料不足5個時,系統將自動補全

示例6-2 傳入2個動態日期,1個靜態日期

<input type="text" class="Wdate" onFocus="WdatePicker({dateFmt:'yyyy年MM月dd日',qsEnabled:true,quickSel:['2000-10-01','%y-%M-01','%y-%M-%ld']})"/>

注意:當傳入的資料不足5個時,系統將自動補全

三. 配置說明

1. 屬性配置

1. 1.           屬性表

1. 2.           配置全域性預設值

通過配置WdatePicker.js的屬性可以避免每次呼叫都傳入配置值,為變成帶來很多方便.
在預設情況下My97為每個屬性都配置了預設值,這些預設值都可以在WdatePicker.js中修改的
你可以根據你個人的喜好更改這些值

比如你比較不喜歡預設的面板default 而更喜歡 whyGreen 這個面板,
你可以直接在WdatePicker.js把skin值改為 whyGreen
這樣,你就不必每次呼叫控制元件的時候都傳入 skin:'whyGreen' 了
你學會了嗎?

1. 3.           配置單個控制元件

在控制元件裡面你可以使用 onfocus 或 onclick 事件來呼叫WdatePicker函式來觸發日期控制元件
WdatePicker({})其中{}中的內容都是隻對當前例項有效,你可以任意配置屬性表裡有的所有屬性
你可以隨意的組合這些屬性,達到你的需求
My97日期控制元件在這方面是做得非常靈活的.

1. 4.           多套配置快速切換

您可以設定多個WdatePicker.js檔案,如 cn_WdatePicker.js,en_WdatePicker.js,simple_WdatePicker.js等
在不同的頁面引入不同的 WdatePicker.js 達到配置快速切換的目的.
注意:檔案必須以 _WdatePicker.js(大小寫不限制) 為字尾,形如 <yourname>_WdatePicker.js

2. 語言配置

1. 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檔案所對應的編碼格式

1. 2.           語言安裝說明

分兩步輕鬆實現:
1 將語言檔案拷貝到 lang 目錄
2 開啟 config.js 配置語言列表

3. 面板配置

1. 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所對應的編碼格式

1. 2.           面板安裝說明

分兩步輕鬆實現:
1 將面板檔案包拷貝到 skin 目錄
2 開啟 config.js 配置面板列表

注意:安裝過多的面板會影響效率,一般5個以下比較適宜

四. 如何使用

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

2. 加上主調函式 WdatePicker
關於 WdatePicker 的用法:

如果您是新手,對js還不是很瞭解的話一定要多看看這份文件
基本上每一個演示的示例下面都有相關程式碼,並且 關鍵屬性用藍字標出,關鍵值用紅字標出 應該很容易看明白

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

如果您是高手
建議您通讀配置說明和內建函式

五. 內建函式

六. 疑難解答

任何問題,請先參考 技術支援
如果找不到答案,您可以直接在blog留言,或者通過下面的聯絡方式與我聯絡

七. 聯絡My97

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

© 2008 My97 All Rights Reserved.