WdatePicker.js時間日期插件的使用方法
本文介紹了WdatePicker.js時間插件使用，分享給大家，具體如下：
引用：
在項目中引用“plugin-clander”文件夾。
在html中引用”WdatePicker.js”即可。
<script src="js/plugin-clander/WdatePicker.js"></script>
1.沒有對控件進(jìn)行設(shè)置
<input class="Wdate" type="text" onfocus="WdatePicker()"/>
2.限制日期的范圍是 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' })"/>
3.限制日期的范圍是 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.限制日期的范圍是 2008年2月 到 2008年10月
5.限制日期的范圍是 8:00:00 到 11:30:00
6.只能選擇今天以前的日期(包括今天)
7.使用了運(yùn)算表達(dá)式 只能選擇今天以后的日期(不包括今天)
8. 只能選擇本月的日期1號至本月最后一天
9.只能選擇今天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' })"/>
10.使用了運(yùn)算表達(dá)式 只能選擇 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' })"/>
11. 前面的日期不能大于后面的日期且兩個日期都不能大于 2020-10-01
合同有效期從 到
[注意: 兩個日期的日期格式必須相同.
dp. 相當(dāng)于 document.getElementByIdx_x 函數(shù).
那么為什么里面的 ' 使用 \' 呢? 那是因為 ” 和 ' 都被外圍的函數(shù)使用了,故使用轉(zhuǎn)義符 \ ,否則會提示JS語法錯誤.所以您在其他地方使用時注意把 \' 改成 ” 或者 ' 來使用.
#F{$dp.$D(\'d4312\')||\'2020-10-01\'} 表示當(dāng) d4312 為空時, 采用 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' })"/>
WdatePicker.js時間插件的取值和賦值：
引用：
<script src="js/jquery-2.1.1.min.js"></script> <script src="js/plugin-clander/WdatePicker.js"></script>
html:
<input class="div-Wdate" type="text" onfocus="WdatePicker()"/> <p><button class="tijiaoBtn">提交</button></p>
js:
//賦值
$(".div-Wdate").val("2019-01-01");
//取值
$(".tijiaoBtn").on("click",function(){
console.log($(".div-Wdate").val());
});
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
用一段js程序來實現(xiàn)動畫功能...2007-03-03
微信小程序購物車、父子組件傳值及calc的注意事項總結(jié)
這篇文章主要給大家介紹了關(guān)于微信小程序購物車、父子組件傳值及calc的注意事項的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
本文為大家詳細(xì)介紹下js中關(guān)于簡單事件的處理與瀏覽器對象，下面有個不錯的示例，感興趣的朋友可以參考下2013-11-11
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)瀑布流布局，無限加載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03![js中[]、{}、()區(qū)別示例淺析](http://img.jbzj.com/images/xgimg/bcimg4.png)
很多人都知道在js中[]表示的是數(shù)組對象,{}表示的是對象,但是這兩者的區(qū)別卻說不出來,下面這篇文章主要給大家介紹了關(guān)于js中[]、{}、()區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了使用webpack和rollup打包組件庫的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
這篇文章主要介紹了微信小程序一周時間表功能實現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10
基于Javascript實現(xiàn)的不重復(fù)ID的生成器
本文介紹了js生成一個不重復(fù)的ID的函數(shù)的進(jìn)化之路，具有一定的參考價值，需要的朋友一起來看下吧2016-12-12
JS基于cookie實現(xiàn)來賓統(tǒng)計記錄訪客信息的方法
這篇文章主要介紹了JS基于cookie實現(xiàn)來賓統(tǒng)計記錄訪客信息的方法,通過javascript記錄訪客信息到cookie的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
bootstrap daterangepicker雙日歷時間段選擇控件詳解
這篇文章主要為大家詳細(xì)介紹了bootstrap daterangepicker雙日歷時間段選擇控件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06