My97DatePicker 演示

時間 2019-11-20

標籤 my97datepicker datepicker 演示简体版

原文原文鏈接

一. 簡介

1. 簡介

目前的版本是:4.0 正式版發佈於2008-05-30javascript

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+css

二. 功能及示例

1. 常規功能

支持多種調用模式
除了支持常規在input單擊或得到焦點調用外,還支持使用其餘的元素如:<img><div>等觸發WdatePicker函數來調用彈出日期框java

示例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. 直接使用鍵盤輸入數字

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

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

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

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

示例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 用法詳見內置函數
ide
只讀開關,高亮週末功能
設置readOnly屬性 true 或 false 可指定日期框是否只讀
設置highLineWeekDay屬性 ture 或 false 可指定是否高亮週末函數
操做按鈕自定義
清空按鈕和今天按鈕,能夠根據須要進行自定義,它們分別對應 isShowClear 和 isShowToday 默認值都是true

示例1-5 禁用清空功能

最好把readOnly置爲true,不然即便隱藏了清空按鈕,用戶依然能夠在輸入框裏把值delete掉

<input class="Wdate" type="text" id="d15" onFocus="WdatePicker({isShowClear:false,readOnly:true})"/>
自動選擇顯示位置
當控件處在頁面邊界時,它會自動選擇顯示的位置,因此沒有必要擔憂彈出框會被頁面邊界遮住的問題了.
自定義彈出位置
當控件處在頁面邊界時,它會自動選擇顯示的位置.此外你還可使用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. 特點功能

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

示例2-1 平面顯示演示

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

$dp.cal.getDateStr 用法詳見內置函數
支持多種容器
除了能夠將值返回給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 一致
有時在項目中須要選擇生日之類的日期,而默認點開始日期都是當前日期,致使年份選擇很是麻煩,你能夠經過起始日期功能加上配置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})"/>

自定義格式

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: 年月日時分秒

示例 2-4-2 時分秒

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

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

示例 2-4-3 年月

示例 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格式化後的值)

編輯功能
不知道您是否已經注意到,當日期框裏面有值時,右下角的按鈕會變成更新,修改完某個屬性後,只要點擊這個按鈕就能夠實現時間和日期的編輯

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

您能夠嘗試對下面框中的月份改成1,而後點擊更新,你會發現日期由 2000-02-29 01:00:00 變爲 2000-01-29 01: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 民國年演示

<input type="text" id="d28" onClick="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 多語言示例

繁體中文:
<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',即根據瀏覽器的語言自動選擇語言.
自定義和動態切換皮膚
經過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. 日期範圍限制

靜態限制
注意:日期格式必須與 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'})"/>

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

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

動態變量表

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

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

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

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

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

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

腳本自定義限制
注意:日期格式必須與 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})"/>
無效天
可使用此功能禁用週日至週六所對應的日期,相關屬性: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]})"/>
無效日期
注意:日期格式必須與 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()}']})"/>
有效天與有效日期
使用無效天和無效日期能夠很方便的禁用不可用的日期,可是在只須要啓用少部分日期的狀況下,有效天和有效日期的功能就很是適合了.
關鍵屬性: opposite 默認爲false, 爲true時,無效天和無效日期變成有效天和有效日期

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

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

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

5. 自定義事件

自定義事件
若是你須要作一些附加的操做,你也沒必要擔憂,日期控件自帶的自定義事件能夠知足你的需求.此外,你還能夠在自定義事件中調用提供的API庫來作更多的運算和擴展,絕對能夠經過不多的代碼知足你及其個性化的需求.

注意下面幾個重要的指針,將對你的編程帶來不少便利
this: 指向文本框
dp: 指向$dp
dp.cal: 指向日期控件對象
注意:函數原型必須使用相似 function(dp){} 的模式,這樣子,在函數內部纔可使用dp
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="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都是內置函數
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. 屬性配置

屬性表

屬性	類型	默認值	說明
靜態屬性:只能在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	'%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		糾錯模式設置可設置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日期控件在這方面是作得很是靈活的.

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庫(僅這一個文件便可,其餘文件會自動引入,請勿刪除或更名), 代碼以下 <script language="javascript" type="text/javascript" src="datepicker/WdatePicker.js"></script>
注:src="datepicker/WdatePicker.js" 請根據你的實際狀況改變路徑

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

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

若是您有必定的水準
但願能從頭至尾把功能介紹好好看一遍,這樣大部分功能你都會用了

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

五. 內置函數

函數名	返回值類型	做用域	參數	描述
$dp.$	Element	全局	el [string]: 對象的ID	至關於document.getElementById 參考示例 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	返回所指定屬性被格式字符串格式化後的值[整個值]
完善中	完善中	完善中	完善中	完善中

六. 疑難解答

任何問題,請先參考blog裏的帖子 My97 DatePicker 4.0 疑難解答(實時更新)
若是找不到答案,您能夠直接在blog留言,或者經過下面的聯繫方式與我聯繫

七. 聯繫My97

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

相關標籤/搜索

my97datepicker+jquery.datepicker+mobiscroll

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

My97DatePicker 演示

一. 簡介

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 將日期返回到<span>中

示例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 綜合使用兩個事件

6. 快速選擇功能

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

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

三. 配置說明

1. 屬性配置

2. 語言配置

3. 皮膚配置

四. 如何使用

五. 內置函數

六. 疑難解答

七. 聯繫My97

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

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

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

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

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

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

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

示例4-5-2 禁用全部早於2000-01-01的日期

示例4-5-4 min/maxDate disabledDays disabledDates 配合使用即便在要求很是苛刻的狀況下也能知足需求

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

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