WdatePicker的使用說明

轉載的新浪微博一個哥們的，希望不要介意

My97DatePicker目錄是一個整體,不可破壞裏面的目錄結構,也不可對裏面的文件改名,可以改目錄名

My97DatePicker.htm是必須文件,不可刪除

各目錄及文件的用途:

WdatePicker.js 配置文件,在調用的地方僅需使用該文件

config.js 語言和皮膚配置文件

calendar.js 日期庫主文件)

My97DatePicker.htm 臨時頁面文件,不可刪除

目錄lang 存放語言文件

目錄skin 存放皮膚的相關文件

下載地址：http://files.cnblogs.com/my97/My97DatePicker.rar

演示地址：http://www.my97.net/dp/demo/

一. 簡介

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. 常規功能

支持多種調用模式
除了支持常規在input單擊或獲得焦點調用外,還支持使用其他的元素如:

等觸發WdatePicker函數來調用彈出日期框

示例1-1-1 常規調用

onClick="WdatePicker()"/>

示例1-1-2 圖標觸發

click="WdatePicker({el:$dp.$('d12')})"src="http://runboliu.blog.163.com/blog/../skin/datePicker.gif"_fcksavedurl=""../skin/datePicker.gif"" width="16" height="22"align="absmiddle">
注:$dp.$ 相當於 document.getElementByIdx_x
$dp.$ 的詳細用法可以參考內置函數
下拉,輸入,導航選擇日期
年月時分秒輸入框都具備以下三種特性
1. 通過導航圖標選擇

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

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

另:年份輸入框有智能提示功能,當用戶連續點擊同一個導航按鈕5次時,會自動彈出年份下拉框
支持周顯示
可以通過配置isShowWeek屬性決定是否限制周,並且在返回日期的時候還可以通過自帶的自定義事件和API函數返回選擇的周

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

focus="WdatePicker({isShowWeek:true})"/>

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

您選擇了第 (W格式)周, 另外您可以使用WW格式:周
Focus="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 用法詳見內置函數

只讀開關,高亮週末功能
設置readOnly屬性 true 或 false 可指定日期框是否只讀
設置highLineWeekDay屬性 ture 或 false 可指定是否高亮週末
操作按鈕自定義
清空按鈕和今天按鈕,可以根據需要進行自定義,它們分別對應 isShowClear 和 isShowToday默認值都是true

示例1-5 禁用清空功能

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

Focus="WdatePicker({isShowClear:false,readOnly:true})"/>
自動選擇顯示位置
當控件處在頁面邊界時,它會自動選擇顯示的位置,所以沒有必要擔心彈出框會被頁面邊界遮住的問題了.
自定義彈出位置
當控件處在頁面邊界時,它會自動選擇顯示的位置.此外你還可以使用position參數對彈出位置做調整.

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

使用positon屬性指定,彈出日期的座標爲{left:100,top:50}

focus="WdatePicker({position:{left:100,top:50}})"/>

position屬性的詳細用法詳見屬性表

2. 特色功能

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

示例2-1 平面顯示演示

$dp.cal.getDateStr 用法詳見內置函數

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

示例2-2 將日期返回到中

2008-01-01

代碼:
2008-01-01
Click="WdatePicker({el:'demospan'})"src="http://www.cnblogs.com/My97DatePicker/skin/datePicker.gif"_fcksavedurl=""http://www.cnblogs.com/My97DatePicker/skin/datePicker.gif""width="16" height="22" align="absmiddle" style="cursor:pointer"/>
起始日期功能
注意:日期格式必須與 realDateFmt 和 realTimeFmt 一致
有時在項目中需要選擇生日之類的日期,而默認點開始日期都是當前日期,導致年份選擇非常麻煩,你可以通過起始日期功能加上配置alwaysUseStartDate屬性輕鬆解決此類問題

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

默認的起始日期爲 1980-05-01
當日期框爲空值時,將使用 1980-05-01 做爲起始日期

Focus="WdatePicker({startDate:'1980-05-01'})"/>

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

默認的起始日期爲 1980-05-01
當日期框無論是何值,始終使用 1980-05-01 做爲起始日期

Focus="WdatePicker({startDate:'1980-05-01',alwaysUseStartDate:true})"/>

示例2-3-3 使用內置參數

除了使用靜態的日期值以外,還可以使用動態參數(如:%y,%M分別表示當前年和月)

下例演示,年月日使用當年當月的1日,時分秒使用00:00:00作爲起始時間

Focus="WdatePicker({startDate:'%y-%M-0100:00:00',dateFmt:'yyyy-MM-ddHH:mm:ss',alwaysUseStartDate:true})"/>

自定義格式

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

日期格式表

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

focus="WdatePicker({dateFmt:'yyyy年MM月dd日HH時mm分ss秒'})" class="Wdate" style="width:300px"/>

示例 2-4-2 時分秒

focus="WdatePicker({skin:'whyGreen',dateFmt:'H:mm:ss'})"class="Wdate"/>

注意:這裏提前使用了皮膚(skin)屬性,所以你會看到一個不同的皮膚,皮膚屬性詳見自定義和動態切換皮膚

示例 2-4-3 年月

focus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy年MM月'})"class="Wdate"/>

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

類似於 1999年7月5日這樣的日期是不能夠被系統識別的,他必須轉換爲能夠識別的類型如 1999-07-05

真實的日期值是:
focus="WdatePicker({dateFmt:'yyyy年M月d日',vel:'d244_2'})"/>

注意:在實際應用中,一般會把vel指定爲一個hidden控件,這裏是爲了把真實值展示出來,所以使用文本框
關鍵屬性: vel指定一個控件或控件的ID,必須具有value屬性(如input),用於存儲真實值(也就是realDateFmt和realTimeFmt格式化後的值)
編輯功能
當日期框裏面有值時,修改完某個屬性後,只要點擊這個按鈕就可以實現時間和日期的編輯

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

您可以嘗試對下面框中的月份改爲1,然後點擊更新,你會發現日期由2000-02-29 01:00:00 變爲 2000-01-2901:00:00
自動糾錯功能
糾錯處理可設置爲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中定義的
跨無限級框架顯示
無論你把日期控件放在哪裏,你都不需要擔心會被外層的iframe所遮擋進而影響客戶體驗,因爲My97日期控件是可以跨無限級框架顯示的
示例2-7 跨無限級框架演示

可無限跨越框架iframe,無論怎麼嵌套框架都不必擔心了,即使有滾動條也不怕
民國年日曆和其他特殊日曆
當年份格式設置爲yyy格式時,利用年份差量屬性yearOffset(默認值1911民國元年),可實現民國年日曆和其他特殊日曆

示例2-8 民國年演示

Click="WdatePicker({dateFmt:'yyy/MM/dd'})"/>

注意:年份格式設置成yyy時,真正的日期將會減去一個差量yearOffset(默認值爲:1911),如果是民國年使用默認值即可無需另外配置,如果是其他的差量,可以通過參數的形式配置
爲編程帶來方便
如果el的值是this,可省略,即所有的el:this都可以不寫
日期框設置爲disabled時,禁止更改日期(不彈出選擇框)
如果沒有定義onpicked事件,自動觸發文本框的onchange事件
如果沒有定義oncleared事件,清空時,自動觸發onchange事件
其他屬性
設置readOnly屬性,可指定日期框是否只讀
設置highLineWeekDay屬性,可指定是否高亮週末
設置isShowOthers屬性,可指定是否顯示其他月的日期
加上class="Wdate"就會在選擇框右邊出現日期圖標

3. 多語言和自定義皮膚

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

示例3-1 多語言示例

繁體中文:
Focus="WdatePicker({lang:'zh-tw'})"/>

英文:
Focus="WdatePicker({lang:'en'})"/>

簡體中文:
Focus="WdatePicker({lang:'zh-cn'})"/>

注意:默認情況lang='auto',即根據瀏覽器的語言自動選擇語言.
自定義和動態切換皮膚立刻轉到皮膚中心
通過skin屬性,可以爲每個日期控件單獨配置皮膚,當然也可以通過WdatePicker.js配置全局的皮膚
皮膚列表和皮膚安裝說明詳見皮膚配置

示例3-2 皮膚演示

默認皮膚default: skin:'default'

focus="WdatePicker()"/>

注意:在WdatePicker裏配置了skin='default',所以此處可省略,同理,如果你把WdatePicker裏的skin配置成'whyGreen'那麼在不指定皮膚的情況下都使用'whyGreen'皮膚了

whyGreen皮膚: skin:'whyGreen'

focus="WdatePicker({skin:'whyGreen'})"/>

注意:更多皮膚,請到皮膚中心下載

4. 日期範圍限制

靜態限制
注意:日期格式必須與 realDateFmt 和 realTimeFmt 一致
你可以給通過配置minDate(最小日期),maxDate(最大日期)爲靜態日期值,來限定日期的範圍

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

focus="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

focus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-ddHH:mm:ss',minDate:'2008-03-0811:30:00',maxDate:'2008-03-1020:59:30'})" value="2008-03-09 11:00:00"/>

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

focus="WdatePicker({dateFmt:'yyyy年M月',minDate:'2008-2',maxDate:'2008-10'})"/>

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

focus="WdatePicker({dateFmt:'H:mm:ss',minDate:'8:00:00',maxDate:'11:30:00'})"/>

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

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

動態變量表

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

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

focus="WdatePicker({skin:'whyGreen',maxDate:'%y-%M-%d'})"/>

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

focus="WdatePicker({minDate:'%y-%M-#{%d+1}'})"/>

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

focus="WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld'})"/>

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

focus="WdatePicker({dateFmt:'yyyy-M-dH:mm:ss',minDate:'%y-%M-%d7:00:00',maxDate:'%y-%M-#{%d+1}21:00:00'})"/>

示例4-2-5 使用了運算表達式只能選擇 20小時前至 30小時後的日期

Click="WdatePicker({dateFmt:'yyyy-MM-ddHH:mm',minDate:'%y-%M-%d#{%H-20}:%m:%s',maxDate:'%y-%M-%d#{%H+30}:%m:%s'})"/>

腳本自定義限制
注意:日期格式必須與 realDateFmt 和 realTimeFmt 一致
系統提供了$dp.$D和$dp.$DV這兩個API來輔助你進行日期運算,此外你還可以通過在 #F{}中填入你自定義的腳本,做任何你想做的日期限制

示例4-3-1 前面的日期不能大於後面的日期且兩個日期都不能大於 2020-10-01

合同有效期從到
Focus="WdatePicker({maxDate:'#F{$dp.$D(\'d4312\')||\'2020-10-01\'}'})"/>
Focus="WdatePicker({minDate:'#F{$dp.$D(\'d4311\')}',maxDate:'2020-10-01'})"/>

注意:
兩個日期的日期格式必須相同

$dp.$ 相當於 document.getElementByIdx_x 函數.
那麼爲什麼裏面的 ' 使用 \' 呢? 那是因爲 " 和 ' 都被外圍的函數使用了,故使用轉義符 \,否則會提示JS語法錯誤.
所以您在其他地方使用時注意把 \' 改成 " 或者 ' 來使用.

#F{$dp.$D(\'d4312\')||\'2020-10-01\'} 表示當 d4312 爲空時, 採用 2020-10-01的值作爲最大值

示例4-3-2 前面的日期+3天不能大於後面的日期

日期從到
Focus="WdatePicker({maxDate:'#F{$dp.$D(\'d4322\',{d:-3});}'})"/>
Focus="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

住店日期從到
Focus="WdatePicker({maxDate:'#F{$dp.$D(\'d4332\',{M:-3,d:-2})||$dp.$DV(\'2020-4-3\',{M:-3,d:-2})}'})"/>
Focus="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才能,定義任何你想要的日期限制

自動轉到隨機生成的一天,當然,此示例沒有實際的用途,只是爲演示目的

Focus="vardate=randomDate();WdatePicker({minDate:date,maxDate:date})"/>
無效天
可以使用此功能禁用週日至週六所對應的日期,相關屬性:disabledDays (0至6 分別代表週日至週六)

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

Focus="WdatePicker({disabledDays:[6]})"/>

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

Focus="WdatePicker({disabledDays:[0,6]})"/>
無效日期
注意:日期格式必須與 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日

Focus="WdatePicker({disabledDates:['5$']})"/>

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

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

Focus="WdatePicker({disabledDates:['^19']})"/>

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

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

本示例本月可用日期分隔成五段分別是: 1-3 8-10 16-24 26,27 29-月末

Focus="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配合使用即使在要求非常苛刻的情況下也能滿足需求

Focus="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 等變量

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

Focus="WdatePicker({dateFmt:'yyyy-MM-ddHH:mm:ss',disabledDates:['%y-%M-%d#{%H-1}\:..\:..','%y-%M-%d #{%H+1}\:..\:..']})"/>

注意:%y %M %d等詳見動態變量表

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

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

Focus="WdatePicker({dateFmt:'HH:mm:ss',disabledDates:['#F{randomH()}']})"/>

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

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

Focus="WdatePicker({opposite:true,disabledDates:['5$']})"/>

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

5. 自定義事件

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

注意下面幾個重要的指針,將對你的編程帶來很多便利
this: 指向文本框
dp: 指向$dp
dp.cal: 指向日期控件對象
注意:函數原型必須使用類似 function(dp){} 的模式,這樣子,在函數內部纔可以使用dp
onpicking 和 onpicked 事件

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

Focus="WdatePicker({onpicking:function(dp){if(!confirm('日期框原來的值爲:'+dp.cal.getDateStr()+', 要覆蓋嗎?')) return true;}})"class="Wdate"/>

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

選擇第一個日期的時候,第二個日期選擇框自動彈出
日期從: 至
注意:下面第一個控件代碼的寫法
Focus="vard5222=$dp.$('d5222');WdatePicker({onpicked:function(){d5222.focus();},maxDate:'#F{$dp.$D(\'d5222\')}'})"/>
至
Focus="WdatePicker({minDate:'#F{$dp.$D(\'d5221\')}'})"/>

注意:$dp.$是一個內置函數,相當於document.getElementByIdx_x

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

年月日時分秒
年
月

日
時
分
秒
click="WdatePicker({el:'d523',dateFmt:'yyyy-MM-ddHH:mm:ss',onpicked:pickedFunc})"src="http://www.cnblogs.com/My97DatePicker/skin/datePicker.gif"width="16" height="22" align="absmiddle"style="cursor:pointer"/>

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');
}

注意:el:'d523'中,如果你不需要d523這個框,你可以把他改成hidden,但是el屬性必須指定
$dp.$和$dp.cal.getP都是內置函數

onclearing 和 oncleared 事件

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

Focus="WdatePicker({onclearing:function(){if(!confirm('日期框的值爲:'+this.value+',確實要清空嗎?'))return true;}})"/>

注意:當onclearing函數返回true時,系統的清空事件將被取消,
函數體裏面沒有引用$dp,所以函數原型裏面可以省略參數dp

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

Focus="WdatePicker({oncleared:function(dp){alert('當前日期所選擇的月份爲:'+dp.cal.date.M);}})"/>

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

Focus="d533_focus(this)"/>

6. 快速選擇功能

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

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

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

focus="WdatePicker({dateFmt:'yyyy年MM月dd日',qsEnabled:true,quickSel:['2000-1-10','2000-2-20']})"/>

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

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

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

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

三. 配置說明

1. 屬性配置

屬性表

屬性	類型	默認值	說明
靜態屬性:只能在WdatePicker.js中配置,一般情況下,不建議您修改靜態屬性的值
$wdate	bool	true	是否自動引入Wdate類設置爲true時,可直接在引入WdatePicker.js的頁面裏使用class="Wdate" Wdate可在skin目錄下的WdatePicker.css文件中定義建議使用默認值
$dpPath	string	''	是否顯示指定程序包的絕對位置,一般情況下爲空即可(程序自動創建),該屬性是爲防止極其少數的情況下程序創建出錯而設置的設置方法: 如果,程序包所在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屬性只接受數字,top屬性除接受數字外還可以接受'above' 上方顯示, 'under' 下方顯示, 'auto' 系統根據頁面大小自動選擇(默認) 如: {left:100,top:50}表示固定座標[100,50] {top:50}表示橫座標自動生成,縱座標指定爲 50 {left:100}表示縱座標自動生成,橫座標指定爲 100 {top:'above'}表示上方顯示 {top:'under'}表示下方顯示請參考示例
lang	string	'auto'	當值爲'auto'時自動根據客戶端瀏覽器的語言自動選擇語言當值爲其他時從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	'�te %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	快速選擇數據,可以傳入5個快速選擇日期注意:日期格式必須與 realDateFmt realTimeFmt realFullFmt 相匹配你可以參考快速選擇示例
disabledDays	Array	null	可以使用此功能禁用週日至週六所對應的日期 0至6 分別代表週日至週六你可以參考無效天示例
disabledDates	Array	null	可以使用此功能禁用所指定的一個或多個日期你可以參考無效日期示例
opposite	bool	false	默認爲false, 爲true時,無效天和無效日期變成有效天和有效日期你可以參考有效天與有效日期示例
onpicking	function	null	此四個參數爲事件參數你可以參考自定義事件示例
onpicked	function	null
onclearing	function	null
oncleared	function	null

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

比如你比較不喜歡默認的皮膚default 而更喜歡 whyGreen 這個皮膚,
你可以直接在WdatePicker.js把skin值改爲 whyGreen
這樣,你就不必每次調用控件的時候都傳入 skin:'whyGreen' 了
你學會了嗎?
配置單個控件
在控件裏面你可以使用 onfocus 或 onclick事件來調用WdatePicker函數來觸發日期控件
WdatePicker({})其中{}中的內容都是隻對當前實例有效,你可以任意配置屬性表裏有的所有屬性
你可以隨意的組合這些屬性,達到你的需求
My97日期控件在這方面是做得非常靈活的.
多套配置快速切換
您可以設置多個WdatePicker.js文件,如cn_WdatePicker.js,en_WdatePicker.js,simple_WdatePicker.js等
在不同的頁面引入不同的 WdatePicker.js 達到配置快速切換的目的.
注意:文件必須以 _WdatePicker.js(大小寫不限制) 爲後綴,形如_WdatePicker.js

2. 語言配置

語言列表
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 將語言文件拷貝到 lang 目錄
2 打開 config.js 配置語言列表

3. 皮膚配置

皮膚列表
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 將皮膚文件包拷貝到 skin 目錄
2 打開 config.js 配置皮膚列表

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

四. 如何使用

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

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

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

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

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

五. 內置函數

函數名	返回值類型	作用域	參數	描述
$dp.$	Element	全局	el [string]: 對象的ID	相當於document.getElementByIdx_x 參考示例 1-1-2
$dp.show	void	全局	無	顯示日期選擇框
$dp.hide	void	全局	無	隱藏日期選擇框
$dp.$D	String	全局	id [string]: 對象的ID arg [object]: 日期差量,可以設置成 {y:[值],M:[值],d:[值],H:[值],m:[值],s:[值]} 屬性 y,M,d,H,m,s 分別代表年月日時分秒 {M:3,d:7} 表示 3個月零7天 {d:1,H:1} 表示1天多1小時	將id對應的日期框中的日期字符串,加上定義的日期差量,返回使用real格式化後的日期串參考示例 4-3-2
$dp.$DV	String	全局	v [string]: 日期字符串 arg [object]: 同上例的arg	將傳入的日期字符串,加上定義的日期差量,返回使用real格式化後的日期串參考示例 4-3-3
以下函數只在事件自定義函數中有效
$dp.cal.getP	String	事件function	p [string]: 屬性名稱yMdHmswWD分別代表年,月,日,時,分,秒,星期(0-6),周(1-52),星期(一-六) f [string]: format 格式字符串設置方法參考 1.4 自定義格式	返回所指定屬性被格式字符串格式化後的值[單屬性] 參考示例 1-2-2
dp.cal.getDateStr	String	事件function	f [string]: 格式字符串,爲空時使用dateFmt	返回所指定屬性被格式字符串格式化後的值[整個值]

WdatePicker的使用說明

一. 簡介

1. 簡介

2. 注意事項

3. 支持的瀏覽器

二. 功能及示例

1. 常規功能

示例1-1-1 常規調用

示例1-1-2 圖標觸發

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

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

示例1-5 禁用清空功能

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

2. 特色功能

示例2-1 平面顯示演示

示例2-2 將日期返回到中

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

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

示例2-3-3 使用內置參數

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

示例 2-4-2 時分秒

示例 2-4-3 年月

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

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

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

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

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

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

示例2-8 民國年演示

3. 多語言和自定義皮膚

示例3-1 多語言示例

示例3-2 皮膚演示

4. 日期範圍限制

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

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

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

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

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

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

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

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

示例4-2-5 使用了運算表達式 只能選擇 20小時前 至 30小時後 的日期

示例4-3-1 前面的日期不能大於後面的日期且兩個日期都不能大於 2020-10-01

示例4-3-2 前面的日期+3天 不能大於 後面的日期

示例4-3-3 前面的日期+3月零2天 不能大於 後面的日期 且 前面日期都不能大於 2020-4-3減去3月零2天 後面日期不能大於 2020-4-3

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

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

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

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

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

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

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

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

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

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

5. 自定義事件

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

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

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

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

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

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