一. 簡(jiǎn)介
1. 簡(jiǎn)介
目前的版本是:4.0 正式版 發(fā)布于2008-05-30
2. 注意事項(xiàng)
- My97DatePicker目錄是一個(gè)整體,不可破壞里面的目錄結(jié)構(gòu),也不可對(duì)里面的文件改名,可以改目錄名
- My97DatePicker.htm是必須文件,不可刪除
- 各目錄及文件的用途:
WdatePicker.js 配置文件,在調(diào)用的地方僅需使用該文件
config.js 語(yǔ)言和皮膚配置文件
calendar.js 日期庫(kù)主文件)
My97DatePicker.htm 臨時(shí)頁(yè)面文件,不可刪除
目錄lang 存放語(yǔ)言文件
目錄skin 存放皮膚的相關(guān)文件
- 當(dāng)WdatePicker.js里的屬性:$wdate=true時(shí),在input里加上class="Wdate"就會(huì)在選擇框右邊出現(xiàn)日期圖標(biāo),如果您不喜歡這個(gè)樣式,可以把class="Wdate"去掉,另外也可以通過修改skin目錄下的WdatePicker.css文件來修改樣式
3. 支持的瀏覽器
IE 6.0+ , Firefox 2.0+ , Opera 9.5+ , Safari 3.0+
二. 功能及示例
1. 常規(guī)功能
- 支持多種調(diào)用模式
除了支持常規(guī)在input單擊或獲得焦點(diǎn)調(diào)用外,還支持使用其他的元素如:<img><div>等觸發(fā)WdatePicker函數(shù)來調(diào)用彈出日期框
- 下拉,輸入,導(dǎo)航選擇日期
年月時(shí)分秒輸入框都具備以下三種特性
1. 通過導(dǎo)航圖標(biāo)選擇
2. 直接使用鍵盤輸入數(shù)字
3. 直接從彈出的下拉框中選擇
另:年份輸入框有智能提示功能,當(dāng)用戶連續(xù)點(diǎn)擊同一個(gè)導(dǎo)航按鈕5次時(shí),會(huì)自動(dòng)彈出年份下拉框
- 支持周顯示
可以通過配置isShowWeek屬性決定是否限制周,并且在返回日期的時(shí)候還可以通過自帶的自定義事件和API函數(shù)返回選擇的周
- 只讀開關(guān),高亮周末功能
設(shè)置readOnly屬性 true 或 false 可指定日期框是否只讀
設(shè)置highLineWeekDay屬性 ture 或 false 可指定是否高亮周末
- 操作按鈕自定義
清空按鈕和今天按鈕,可以根據(jù)需要進(jìn)行自定義,它們分別對(duì)應(yīng) isShowClear 和 isShowToday 默認(rèn)值都是true
- 自動(dòng)選擇顯示位置
當(dāng)控件處在頁(yè)面邊界時(shí),它會(huì)自動(dòng)選擇顯示的位置,所以沒有必要擔(dān)心彈出框會(huì)被頁(yè)面邊界遮住的問題了.
- 自定義彈出位置
當(dāng)控件處在頁(yè)面邊界時(shí),它會(huì)自動(dòng)選擇顯示的位置.此外你還可以使用position參數(shù)對(duì)彈出位置做調(diào)整.
2. 特色功能
- 平面顯示
日期控件支持平面顯示功能,只要設(shè)置一下eCont屬性就可以把它當(dāng)作日歷來使用了,無需觸發(fā)條件,直接顯示在頁(yè)面上
示例2-1 平面顯示演示
<div id="div1"></div>
<script>
WdatePicker({eCont:'div1',onpicked:function(dp){alert('你選擇的日期是:'+dp.cal.getDateStr())}})
</script>
$dp.cal.getDateStr 用法詳見內(nèi)置函數(shù)
- 支持多種容器
除了可以將值返回給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" />
- 起始日期功能
注意:日期格式必須與 realDateFmt 和 realTimeFmt 一致
有時(shí)在項(xiàng)目中需要選擇生日之類的日期,而默認(rèn)點(diǎn)開始日期都是當(dāng)前日期,導(dǎo)致年份選擇非常麻煩,你可以通過起始日期功能加上配置alwaysUseStartDate屬性輕松解決此類問題
- 自定義格式
yMdHmswW分別代表年月日時(shí)分秒星期周,你可以任意組合這些元素來自定義你個(gè)性化的日期格式.
日期格式表
| 格式 |
說明 |
| y |
將年份表示為最多兩位數(shù)字。如果年份多于兩位數(shù)，則結(jié)果中僅顯示兩位低位數(shù)。 |
| yy |
同上，如果小于兩位數(shù)，前面補(bǔ)零。 |
| yyy |
將年份表示為三位數(shù)字。如果少于三位數(shù)，前面補(bǔ)零。 |
| yyyy |
將年份表示為四位數(shù)字。如果少于四位數(shù)，前面補(bǔ)零。 |
| M |
將月份表示為從 1 至 12 的數(shù)字 |
| MM |
同上，如果小于兩位數(shù)，前面補(bǔ)零。 |
| d |
將月中日期表示為從 1 至 31 的數(shù)字。 |
| dd |
同上，如果小于兩位數(shù)，前面補(bǔ)零。 |
| H |
將小時(shí)表示為從 0 至 23 的數(shù)字。 |
| HH |
同上，如果小于兩位數(shù)，前面補(bǔ)零。 |
| m |
將分鐘表示為從 0 至 59 的數(shù)字。 |
| mm |
同上，如果小于兩位數(shù)，前面補(bǔ)零。 |
| s |
將秒表示為從 0 至 59 的數(shù)字。 |
| ss |
同上，如果小于兩位數(shù)，前面補(bǔ)零。 |
| w |
返回星期對(duì)應(yīng)的數(shù)字 0 (星期天) - 6 (星期六) 。 |
| D |
返回星期的縮寫 一 至 六 (英文狀態(tài)下 Sun to Sat) 。 |
| W |
返回周對(duì)應(yīng)的數(shù)字 (1 - 53) 。 |
| WW |
同上，如果小于兩位數(shù)，前面補(bǔ)零 (01 - 53) 。 |
示例
| 格式字符串 |
值 |
| yyyy-MM-dd HH:mm:ss |
2008-03-12 19:20:00 |
| yy年M月 |
08年3月 |
| yyyyMMdd |
20080312 |
| 今天是:yyyy年M年d HH時(shí)mm分 |
今天是:2008年3月12日 19時(shí)20分 |
| H:m:s |
19:20:0 |
| y年 |
8年 |
- 編輯功能
不知道您是否已經(jīng)注意到,當(dāng)日期框里面有值時(shí),右下角的按鈕會(huì)變成更新,修改完某個(gè)屬性后,只要點(diǎn)擊這個(gè)按鈕就可以實(shí)現(xiàn)時(shí)間和日期的編輯
- 自動(dòng)糾錯(cuò)功能
糾錯(cuò)處理可設(shè)置為3種模式:提示(默認(rèn)) 自動(dòng)糾錯(cuò) 標(biāo)記,當(dāng)日期框中的值不符合格式時(shí),系統(tǒng)會(huì)嘗試自動(dòng)修復(fù),如果修復(fù)失敗會(huì)根據(jù)您設(shè)置的糾錯(cuò)處理模式進(jìn)行處理,錯(cuò)誤判斷功能非常智能它可以保證用戶輸入的值是一個(gè)合法的值
- 跨無限級(jí)框架顯示
無論你把日期控件放在哪里,你都不需要擔(dān)心會(huì)被外層的iframe所遮擋進(jìn)而影響客戶體驗(yàn),因?yàn)镸y97日期控件是可以跨無限級(jí)框架顯示的
示例2-7 跨無限級(jí)框架演示
可無限跨越框架iframe,無論怎么嵌套框架都不必?fù)?dān)心了,即使有滾動(dòng)條也不怕
- 民國(guó)年日歷和其他特殊日歷
當(dāng)年份格式設(shè)置為yyy格式時(shí),利用年份差量屬性yearOffset(默認(rèn)值1911民國(guó)元年),可實(shí)現(xiàn)民國(guó)年日歷和其他特殊日歷
- 為編程帶來方便
如果el的值是this,可省略,即所有的el:this都可以不寫
日期框設(shè)置為disabled時(shí),禁止更改日期(不彈出選擇框)
如果沒有定義onpicked事件,自動(dòng)觸發(fā)文本框的onchange事件
如果沒有定義oncleared事件,清空時(shí),自動(dòng)觸發(fā)onchange事件
- 其他屬性
設(shè)置readOnly屬性,可指定日期框是否只讀
設(shè)置highLineWeekDay屬性,可指定是否高亮周末
設(shè)置isShowOthers屬性,可指定是否顯示其他月的日期
加上class="Wdate"就會(huì)在選擇框右邊出現(xiàn)日期圖標(biāo)
3. 多語(yǔ)言和自定義皮膚
- 多語(yǔ)言支持
通過lang屬性,可以為每個(gè)日期控件單獨(dú)配置語(yǔ)言,當(dāng)然也可以通過WdatePicker.js配置全局的語(yǔ)言
語(yǔ)言列表和語(yǔ)言安裝說明詳見語(yǔ)言配置
- 自定義和動(dòng)態(tài)切換皮膚
通過skin屬性,可以為每個(gè)日期控件單獨(dú)配置皮膚,當(dāng)然也可以通過WdatePicker.js配置全局的皮膚
皮膚列表和皮膚安裝說明詳見皮膚配置
4. 日期范圍限制
- 靜態(tài)限制
注意:日期格式必須與 realDateFmt 和 realTimeFmt 一致
你可以給通過配置minDate(最小日期),maxDate(最大日期)為靜態(tài)日期值,來限定日期的范圍
- 動(dòng)態(tài)限制
注意:日期格式必須與 realDateFmt 和 realTimeFmt 一致
你可以通過系統(tǒng)給出的動(dòng)態(tài)變量,如%y(當(dāng)前年),%M(當(dāng)前月)等來限度日期范圍,你還可以通過#{}進(jìn)行表達(dá)式運(yùn)算,如:#{%d+1}:表示明天
動(dòng)態(tài)變量表
| 格式 |
說明 |
| %y |
當(dāng)前年 |
| %M |
當(dāng)前月 |
| %d |
當(dāng)前日 |
| %ld |
本月最后一天 |
| %H |
當(dāng)前時(shí) |
| %m |
當(dāng)前分 |
| %s |
當(dāng)前秒 |
| #{} |
運(yùn)算表達(dá)式,如:#{%d+1}:表示明天 |
| #F{} |
{}之間是函數(shù)可寫自定義JS代碼 |
- 腳本自定義限制
注意:日期格式必須與 realDateFmt 和 realTimeFmt 一致
系統(tǒng)提供了$dp.$D和$dp.$DV這兩個(gè)API來輔助你進(jìn)行日期運(yùn)算,此外你還可以通過在 #F{} 中填入你自定義的腳本,做任何你想做的日期限制
示例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ù) 可以將日期框中的值,加上定義的日期差量:
兩個(gè)參數(shù): id={字符類型}需要處理的文本框的id值 , obj={對(duì)象類型}日期差量
日期差量用法:
屬性y,M,d,H,m,s分別代表年月日時(shí)分秒
如
為空時(shí),表示直接取值,不做差量(示例4-3-1中的參數(shù)就是空的)
{M:5,d:7} 表示 五個(gè)月零7天
{y:1,d:-3} 表示 1年少3天
{d:1,H:1} 表示一天多1小時(shí)
示例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})}
表示當(dāng) d4332 為空時(shí), 采用 $dp.$DV(\'2020-4-3\',{M:-3,d:-2})} 的值作為最大值
使用 $dp.$DV 函數(shù) 可以將顯式傳入的值,加上定義的日期差量:
兩個(gè)參數(shù): value={字符類型}需要處理的值 , obj={對(duì)象類型}日期差量
用法同上面的 $dp.$D 類似,如 $dp.$DV(\'2020-4-3\',{M:-3,d:-2}) 表示 2020-4-3減去3月零2天
- 無效天
可以使用此功能禁用周日至周六所對(duì)應(yīng)的日期,相關(guān)屬性:disabledDays (0至6 分別代表 周日至周六)
- 無效日期
注意:日期格式必須與 realDateFmt 和 realTimeFmt 一致
可以使用此功能禁用,所指定的一個(gè)或多個(gè)日期,只要你熟悉正則表達(dá)式,你可以盡情發(fā)揮
用法(正則匹配):
如果你熟悉正則表達(dá)式,會(huì)很容易理解下面的匹配用法
如果不熟悉,可以參考下面的常用示例
['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 等變量, 用法同動(dòng)態(tài)日期限制 注意:%ld不能使用
['....-..-01','%y-%M-%d'] 表示禁用 所有年份和所有月份的第一天和今天
['%y-%M-#{%d-1}','%y-%M-#{%d+1}'] 表示禁用 昨天和明天
當(dāng)然,除了可以限制日期以外,您還可以限制時(shí)間
['....-..-.. 10\:00\:00'] 表示禁用 每天10點(diǎn) (注意 : 需要 使用 \: )
不再多舉例了,盡情發(fā)揮你的正則才能吧!
- 有效天與有效日期
使用無效天和無效日期可以很方便的禁用不可用的日期,但是在只需要啟用少部分日期的情況下,有效天和有效日期的功能就非常適合了.
關(guān)鍵屬性: opposite 默認(rèn)為false, 為true時(shí),無效天和無效日期變成有效天和有效日期
5. 自定義事件
- 自定義事件
如果你需要做一些附加的操作,你也不必?fù)?dān)心,日期控件自帶的自定義事件可以滿足你的需求.此外,你還可以在自定義事件中調(diào)用提供的API庫(kù)來做更多的運(yùn)算和擴(kuò)展,絕對(duì)可以通過很少的代碼滿足你及其個(gè)性化的需求.
注意下面幾個(gè)重要的指針,將對(duì)你的編程帶來很多便利
this: 指向文本框
dp: 指向$dp
dp.cal: 指向日期控件對(duì)象
注意:函數(shù)原型必須使用類似 function(dp){} 的模式,這樣子,在函數(shù)內(nèi)部才可以使用dp
- onpicking 和 onpicked 事件
- onclearing 和 oncleared 事件
6. 快速選擇功能
此功能允許指定5個(gè)最常用的日期,可以方便用戶選擇,如果不指定,系統(tǒng)將自動(dòng)生成
相關(guān)屬性:
qsEnabled 是否啟用快速選擇功能
quickSel 快速選擇數(shù)據(jù),可以傳入5個(gè)快速選擇日期,日期格式同min/maxDate
注意:
日期格式必須與 realDateFmt realTimeFmt 相匹配
除了使用靜態(tài)的日期值以外,還可以使用動(dòng)態(tài)參數(shù)(如:%y,%M分別表示當(dāng)前年和月)
三. 配置說明
1. 屬性配置
- 屬性表
| 屬性 |
類型 |
默認(rèn)值 |
說明 |
| 靜態(tài)屬性:只能在WdatePicker.js中配置,一般情況下,不建議您修改靜態(tài)屬性的值 |
| $wdate |
bool |
true |
是否自動(dòng)引入Wdate類 設(shè)置為true時(shí),可直接在引入WdatePicker.js的頁(yè)面里使用 class="Wdate"
Wdate可在skin目錄下的WdatePicker.css文件中定義
建議使用默認(rèn)值 |
| $dpPath |
string |
'' |
是否顯示指定程序包的絕對(duì)位置,一般情況下為空即可(程序自動(dòng)創(chuàng)建),該屬性是為防止極其少數(shù)的情況下程序創(chuàng)建出錯(cuò)而設(shè)置的
設(shè)置方法:
如果,程序包所在http中的地址為 http://localhost/proName/My97DatePicker/
則 $dpPath = '/proName/My97DatePicker/';
建議使用默認(rèn)值 |
| 可配置屬性:可以在WdatePicker方法是配置 |
| el |
Element 或 String |
null |
指定一個(gè)控件或控件的ID,必須具有value或innerHTML屬性(如input,textarea,span,div,p等標(biāo)簽都可以),用戶存儲(chǔ)日期顯示值(也就是dateFmt格式化后的值) |
| vel |
Element 或 String |
null |
指定一個(gè)控件或控件的ID,必須具有value屬性(如input),用于存儲(chǔ)真實(shí)值(也就是realDateFmt和realTimeFmt格式化后的值) |
| position |
object |
{} |
日期選擇框顯示位置
注意:坐標(biāo)默認(rèn)單位是px,是相對(duì)當(dāng)前框架坐標(biāo)(不受滾動(dòng)條),left屬性只接受數(shù)字,top屬性除接受數(shù)字外還可以接受 'above' 上方顯示, 'under' 下方顯示, 'auto' 系統(tǒng)根據(jù)頁(yè)面大小自動(dòng)選擇(默認(rèn))
如:
{left:100,top:50}表示固定坐標(biāo)[100,50]
{top:50}表示橫坐標(biāo)自動(dòng)生成,縱坐標(biāo)指定為 50
{left:100}表示縱坐標(biāo)自動(dòng)生成,橫坐標(biāo)指定為 100
{top:'above'}表示上方顯示
{top:'under'}表示下方顯示
請(qǐng)參考示例 |
| lang |
string |
'auto' |
當(dāng)值為'auto'時(shí) 自動(dòng)根據(jù)客戶端瀏覽器的語(yǔ)言自動(dòng)選擇語(yǔ)言
當(dāng)值為 其他 時(shí) 從langList中選擇對(duì)應(yīng)的語(yǔ)言
你可以參考語(yǔ)言配置 |
| skin |
string |
'default' |
皮膚名稱 默認(rèn)自帶 default和whyGreen兩個(gè)皮膚
另外如果你的css夠強(qiáng)的話,可以自己做皮膚
你可以參考皮膚配置 |
| dateFmt |
string |
'yyyy-MM-dd' |
日期顯示格式
你可以參考自定義格式 |
| realDateFmt |
string |
'yyyy-MM-dd' |
計(jì)算機(jī)可識(shí)別的,真正的日期格式
無效日期設(shè)置(disabledDates),最大日期(maxDate),最小日期(minDate)以及快速日期都必須與它們相匹配
建議使用默認(rèn)值 |
| 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 |
'' |
起始日期,既點(diǎn)擊日期框時(shí)顯示的起始日期
為空時(shí),使用今天作為起始日期(默認(rèn)值)
否則使用傳入的日期作為起始日期(注意要與上面的real日期相匹配)
你可以參考起始日期示例 |
| isShowWeek |
bool |
false |
是否顯示周
你可以參考周顯示示例 |
| highLineWeekDay |
bool |
true |
是否高亮顯示 周六 周日 |
| isShowClear |
bool |
true |
是否顯示清空按鈕 |
| isShowToday |
bool |
true |
是否顯示今天按鈕 |
| isShowOthers |
bool |
true |
為true時(shí),第一行空白處顯示上月的日期，末行空白處顯示下月的日期,否則不顯示 |
| readOnly |
bool |
false |
是否只讀 |
| errDealMode |
int |
0 |
糾錯(cuò)模式設(shè)置 可設(shè)置3中模式 0 - 提示 1 - 自動(dòng)糾錯(cuò) 2 - 標(biāo)記 |
| autoPickDate |
bool |
null |
為false時(shí) 點(diǎn)日期的時(shí)候不自動(dòng)輸入,而是要通過確定才能輸入
為true時(shí) 即點(diǎn)擊日期即可返回日期值
為null時(shí)(推薦使用) 如果有時(shí)間置為false 否則置為true |
| qsEnabled |
bool |
true |
是否啟用快速選擇功能 |
| quickSel |
Array |
null |
快速選擇數(shù)據(jù),可以傳入5個(gè)快速選擇日期
注意:日期格式必須與 realDateFmt realTimeFmt realFullFmt 相匹配
你可以參考快速選擇示例 |
| disabledDays |
Array |
null |
可以使用此功能禁用周日至周六所對(duì)應(yīng)的日期
0至6 分別代表 周日至周六
你可以參考無效天示例 |
| disabledDates |
Array |
null |
可以使用此功能禁用所指定的一個(gè)或多個(gè)日期
你可以參考無效日期示例 |
| opposite |
bool |
false |
默認(rèn)為false, 為true時(shí),無效天和無效日期變成有效天和有效日期
你可以參考有效天與有效日期示例 |
| onpicking |
function |
null |
此四個(gè)參數(shù)為事件參數(shù)
你可以參考自定義事件示例 |
| onpicked |
function |
null |
| onclearing |
function |
null |
| oncleared |
function |
null |
- 配置全局默認(rèn)值
通過配置WdatePicker.js的屬性可以避免每次調(diào)用都傳入配置值,為變成帶來很多方便.
在默認(rèn)情況下My97為每個(gè)屬性都配置了默認(rèn)值,這些默認(rèn)值都可以在WdatePicker.js中修改的
你可以根據(jù)你個(gè)人的喜好更改這些值
比如你比較不喜歡默認(rèn)的皮膚default 而更喜歡 whyGreen 這個(gè)皮膚,
你可以直接在WdatePicker.js把skin值改為 whyGreen
這樣,你就不必每次調(diào)用控件的時(shí)候都傳入 skin:'whyGreen' 了
你學(xué)會(huì)了嗎?
- 配置單個(gè)控件
在控件里面你可以使用 onfocus 或 onclick 事件來調(diào)用WdatePicker函數(shù)來觸發(fā)日期控件
WdatePicker({})其中{}中的內(nèi)容都是只對(duì)當(dāng)前實(shí)例有效,你可以任意配置屬性表里有的所有屬性
你可以隨意的組合這些屬性,達(dá)到你的需求
My97日期控件在這方面是做得非常靈活的.
2. 語(yǔ)言配置
- 語(yǔ)言列表
My97DatePicker目錄下有個(gè)config.js,里面有段代碼:
var langList =
[
{name:'en', charset:'UTF-8'},
{name:'zh-cn', charset:'gb2312'},
{name:'zh-tw', charset:'GBK'}
];
這就是語(yǔ)言列表,每個(gè)項(xiàng)有name和charset兩個(gè)屬性.
name 表示語(yǔ)言的名稱(必須與瀏覽器的語(yǔ)言字符串命名相同),在配置的時(shí)候,lang屬性只能是配置列表里面已有的項(xiàng),否則將自動(dòng)返回第一項(xiàng)
charset 表示對(duì)應(yīng)語(yǔ)言目錄下的js文件所對(duì)應(yīng)的編碼格式
- 語(yǔ)言安裝說明
分兩步輕松實(shí)現(xiàn):
1 將語(yǔ)言文件拷貝到 lang 目錄
2 打開 config.js 配置語(yǔ)言列表
3. 皮膚配置
- 皮膚列表
My97DatePicker目錄下有個(gè)config.js,里面有段代碼:
var skinList =
[
{name:'default', charset:'gb2312'},
{name:'whyGreen', charset:'gb2312'},
{name:'blue', charset:'gb2312'},
{name:'simple', charset:'gb2312'}
];
這就是皮膚列表,每個(gè)項(xiàng)有name和charset兩個(gè)屬性.
name 表示皮膚的名稱,在配置的時(shí)候,skin屬性只能是配置列表里面已有的項(xiàng),否則將自動(dòng)返回第一項(xiàng)
charset 表示對(duì)應(yīng)皮膚目錄下的css文件:datepicker.css所對(duì)應(yīng)的編碼格式
- 皮膚安裝說明
分兩步輕松實(shí)現(xiàn):
1 將皮膚文件包拷貝到 skin 目錄
2 打開 config.js 配置皮膚列表
注意:安裝過多的皮膚會(huì)影響效率,一般5個(gè)以下比較適宜
四. 如何使用
1. 在使用該日期控件的文件中加入JS庫(kù)(僅這一個(gè)文件即可,其他文件會(huì)自動(dòng)引入,請(qǐng)勿刪除或改名), 代碼如下 <script language="javascript" type="text/javascript" src="datepicker/WdatePicker.js"></script>
注:src="datepicker/WdatePicker.js" 請(qǐng)根據(jù)你的實(shí)際情況改變路徑
2. 加上主調(diào)函數(shù) WdatePicker
關(guān)于 WdatePicker 的用法:
如果您是新手,對(duì)js還不是很了解的話一定要多看看這份文檔
基本上每一個(gè)演示的示例下面都有相關(guān)代碼,并且 關(guān)鍵屬性用藍(lán)字標(biāo)出,關(guān)鍵值用紅字標(biāo)出 應(yīng)該很容易看明白
如果您有一定的水準(zhǔn)
希望能從頭到尾把功能介紹好好看一遍,這樣大部分功能你都會(huì)用了
如果您是高手
建議您通讀配置說明和內(nèi)置函數(shù)
五. 內(nèi)置函數(shù)
| 函數(shù)名 |
返回值類型 |
作用域 |
參數(shù) |
描述 |
| $dp.$ |
Element |
全局 |
el [string]: 對(duì)象的ID |
相當(dāng)于document.getElementById
參考 示例 1-1-2 |
| $dp.show |
void |
全局 |
無 |
顯示日期選擇框 |
| $dp.hide |
void |
全局 |
無 |
隱藏日期選擇框 |
| $dp.$D |
String |
全局 |
id [string]: 對(duì)象的ID
arg [object]: 日期差量,可以設(shè)置成
{y:[值],M:[值],d:[值],H:[值],m:[值],s:[值]}
屬性 y,M,d,H,m,s 分別代表 年月日時(shí)分秒
{M:3,d:7} 表示 3個(gè)月零7天
{d:1,H:1} 表示1天多1小時(shí) |
將id對(duì)應(yīng)的日期框中的日期字符串,加上定義的日期差量,返回使用real格式化后的日期串
參考 示例 4-3-2 |
| $dp.$DV |
String |
全局 |
v [string]: 日期字符串
arg [object]: 同上例的arg |
將傳入的日期字符串,加上定義的日期差量,返回使用real格式化后的日期串
參考 示例 4-3-3 |
| 以下函數(shù)只在事件自定義函數(shù)中有效 |
| $dp.cal.getP |
String |
事件function |
p [string]: 屬性名稱 yMdHmswWD分別代表年,月,日,時(shí),分,秒,星期(0-6),周(1-52),星期(一-六)
f [string]: format 格式字符串
設(shè)置方法參考 1.4 自定義格式 |
返回所指定屬性被格式字符串格式化后的值[單屬性]
參考 示例 1-2-2 |
| dp.cal.getDateStr |
String |
事件function |
f [string]: 格式字符串,為空時(shí)使用dateFmt
|
返回所指定屬性被格式字符串格式化后的值[整個(gè)值] |
| 完善中 |
完善中 |
完善中 |
完善中 |
完善中 |
六. 疑難解答
任何問題,請(qǐng)先參考blog里的帖子 My97 DatePicker 4.0 疑難解答(實(shí)時(shí)更新)
如果找不到答案,您可以直接在blog留言,或者通過下面的聯(lián)系方式與我聯(lián)系
七. 聯(lián)系My97
* 如果您在使用過程中遇到問題,或者有更好的建議
* 歡迎您訪問
* BLOG: http://blog.csdn.net/my97/
* MAIL: smallcarrot@163.com
* 有問題在我blog留言或給我Email吧,最好先仔細(xì)看說明,很多問題都是因?yàn)闆]有仔細(xì)看說明導(dǎo)致的
© 2008 My97 All Rights Reserved.
http://www.my97.net/dp/demo/index.htm
|