WdatePicker()時間控制方式（轉載+原創）

控制時間在制定範圍内：

<input class="wzsrk" name="enddatestr" id="enddatestr" type="text"

placeholder="結束時間" onclick="wdatepicker({mindate: '#f{$dp.$d(\'startdatestr\')||\'%y-%m-%d\'}'})"/>

=========================

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

示例2-1 平面顯示示範

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

代碼:

起始日期功能

注意:日期格式必須與 realdatefmt 和 realtimefmt 一緻

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

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

預設的起始日期為 1980-05-01

當日期框為空值時 ,将使用 1980-05-01 做為起始日期

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

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

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

除了使用靜态的日期值以外,還可以使用動态參數(如:%y,%m分别表示目前年和月)

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

自定義格式

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

日期格式表格式說明

y 将年份表示為最多兩位數字。如果年份多于兩位數，則結果中僅顯示兩位低位數。

yy 同上，如果小于兩位數，前面補零。

yyy 将年份表示為三位數字。如果少于三位數，前面補零。

yyyy 将年份表示為四位數字。如果少于四位數，前面補零。

m 将月份表示為從 1 至 12 的數字

mm 同上，如果小于兩位數，前面補零。

mmm 傳回月份的縮寫一月至十二月 (英文狀态下 jan to dec) 。

mmmm 傳回月份的全稱一月至十二月 (英文狀态下 january to december) 。

d 将月中日期表示為從 1 至 31 的數字。

dd 同上，如果小于兩位數，前面補零。

h 将小時表示為從 0 至 23 的數字。

hh 同上，如果小于兩位數，前面補零。

m 将分鐘表示為從 0 至 59 的數字。

s 将秒表示為從 0 至 59 的數字。

ss 同上，如果小于兩位數，前面補零。

w 傳回星期對應的數字 0 (星期天) - 6 (星期六) 。

d 傳回星期的縮寫一至六 (英文狀态下 sun to sat) 。

dd 傳回星期的全稱星期一至星期六 (英文狀态下 sunday to saturday) 。

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年

mmmm d, yyyy 三月 12, 2008

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

注意: 點兩次才能選擇日期的原因,詳見 autopickdate 屬性

示例 2-4-2 時分秒

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

示例 2-4-3 年月

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

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

真實的日期值是:

注意: 在實際應用中,一般會把vel指定為一個hidden控件 ,這裡是為了把真實值展示出來,是以使用文本框

關鍵屬性: vel 指定一個控件或控件的id,必須具有value屬性(如input),用于存儲真實值(也就是realdatefmt和realtimefmt格式化後的值)

示例 2-4-5 星期, 月日, 年(4.6beta2新增)

雙月月曆功能(4.6beta2新增)

可以同時彈出兩個月的月曆

示例2-5 雙月月曆功能

注意: 雙月月曆一般隻用于包含年月日三個元素的場景,另外設定該屬性時,autopickdate自動設定為true

自動糾錯功能

糾錯處理可設定為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 民國年示範

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

編輯功能

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

示例2-9 日期和時間的編輯示範

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

為程式設計帶來友善

如果el的值是this,可省略,即所有的el:this都可以不寫

日期框設定為disabled時,禁止更改日期(不彈出選擇框)

如果沒有定義onpicked事件,自動觸發文本框的onchange事件

如果沒有定義oncleared事件,清空時,自動觸發onchange事件

其他屬性

設定readonly屬性,可指定日期框是否隻讀

設定highlineweekday屬性,可指定是否高亮周末

設定isshowothers屬性,可指定是否顯示其他月的日期

加上class="wdate"就會在選擇框右邊出現日期圖示

4. 日期範圍限制

靜态限制

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

示例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

動态限制

你可以通過系統給出的動态變量,如%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小時後的日期

腳本自定義限制

系統提供了$dp.$d和$dp.$dv這兩個api來輔助你進行日期運算,此外你還可以通過在 #f{} 中填入你自定義的腳本,做任何你想做的日期限制

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

合同有效期從到

注意:

兩個日期的日期格式必須相同

$dp.$ 相當于 document.getelementbyid 函數.

那麼為什麼裡面的 ' 使用 \' 呢? 那是因為 " 和 ' 都被外圍的函數使用了,故使用轉義符 \ ,否則會提示js文法錯誤.

是以您在其他地方使用時注意把 \' 改成 " 或者 ' 來使用.

#f{$dp.$d(\'d4312\')||\'2020-10-01\'} 表示當 d4312 為空時, 采用 2020-10-01 的值作為最大值

示例4-3-2 前面的日期+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

住店日期從到

#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才能,定義任何你想要的日期限制

自動轉到随機生成的一天,當然,此示例沒有實際的用途,隻是為示範目的

//傳回一個随機的日期

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;

}

無效天

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

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

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

無效日期

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

用法(正則比對):

如果你熟悉正規表達式,會很容易了解下面的比對用法

如果不熟悉,可以參考下面的常用示例

['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日

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

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

注意: '^19' 表示以 19 開頭注意 ^ 的用法

當然,可以使用mindate實作類似的功能這裡主要是在示範 ^ 的用法

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

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

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

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

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

注意: %y %m %d等詳見動态變量表

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

本示例利用自定義函數随機禁用0-23中的任何一個小時

打開小時選擇框,你會發現有一個小時被禁用的,而且每次禁用的小時都不同

function randomh(){

//産生一個随機的數字 0-23

var h = math.round(math.random() * 23);

if(h<10) h='0'+h;

//傳回 '^' + 數字

return '^'+h;

有效天與有效日期

使用無效天和無效日期可以很友善的禁用不可用的日期,但是在隻需要啟用少部分日期的情況下,有效天和有效日期的功能就非常适合了.

關鍵屬性: opposite 預設為false, 為true時,無效天和無效日期變成有效天和有效日期

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

特殊天和特殊日期

特殊天和特殊日期的用法跟完全無效天和無效日期完全相同,但是opposite屬性對其無效

關鍵屬性:

specialdays (0至6 分别代表周日至周六) 用法同無效天

specialdates 用法同無效日期,但是對時分秒無效

示例4-7-1 高亮每周周一周五

示例4-7-2 高亮每月 1号 15号

WdatePicker()時間控制方式（轉載+原創）

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條