WdatePicker.js时间日期插件的使用方法


Posted in Javascript onJuly 26, 2017

本文介绍了WdatePicker.js时间插件使用,分享给大家,具体如下:

引用:

在项目中引用“plugin-clander”文件夹。

在html中引用”WdatePicker.js”即可。

<script src="js/plugin-clander/WdatePicker.js"></script>

1.没有对控件进行设置

<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月

<input type="text" class="Wdate" id="d413" onfocus="WdatePicker({dateFmt: 'yyyy年M月', minDate: '2008-2', maxDate: '2008-10' })"/>

5.限制日期的范围是 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' })"/>

6.只能选择今天以前的日期(包括今天)

<input id="d421" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen',maxDate: '%y-%M-%d' })"/>

7.使用了运算表达式 只能选择今天以后的日期(不包括今天)

<input id="d422" class="Wdate" type="text" onfocus="WdatePicker({minDate: '%y-%M-#{%d+1}' })"/>

8. 只能选择本月的日期1号至本月最后一天

<input id="d423" class="Wdate" type="text" onfocus="WdatePicker({minDate: '%y-%M-01', maxDate: '%y-%M-%ld' })"/>

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.使用了运算表达式 只能选择 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. 相当于 document.getElementByIdx_x 函数.

那么为什么里面的 ' 使用 \' 呢? 那是因为 ” 和 ' 都被外围的函数使用了,故使用转义符 \ ,否则会提示JS语法错误.所以您在其他地方使用时注意把 \' 改成 ” 或者 ' 来使用.

#F{$dp.$D(\'d4312\')||\'2020-10-01\'} 表示当 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());
 });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
Apr 27 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
Oct 21 Javascript
JQuery动画和停止动画实例代码
Mar 01 Javascript
jQuery老黄历完整实现方法
Jan 16 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
May 18 Javascript
javascript轮播图算法
Oct 21 Javascript
JS常用正则表达式总结【经典】
May 12 Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 Javascript
详解适配器在JavaScript中的体现
Sep 28 Javascript
node实现mock-plugin中间件的方法
Dec 25 Javascript
基于JS实现快速读取TXT文件
Aug 25 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
Sep 01 Javascript
关于Stream和Buffer的相互转换详解
Jul 26 #Javascript
JS 60秒后重新发送验证码的实例讲解
Jul 26 #Javascript
JS数组操作中的经典算法实例讲解
Jul 26 #Javascript
你有必要知道的10个JavaScript难点
Jul 25 #Javascript
Vue.js学习笔记之常用模板语法详解
Jul 25 #Javascript
jQuery实现键盘回车搜索功能
Jul 25 #jQuery
简单实现js鼠标跟随效果
Aug 02 #Javascript
You might like
php格式化金额函数分享
2015/02/02 PHP
详解在PHP的Yii框架中使用行为Behaviors的方法
2016/03/18 PHP
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
php,js,css字符串截取的办法集锦
2014/09/26 Javascript
jquery插件qrcode在线生成二维码
2015/04/26 Javascript
JS基于VML技术实现的五角星礼花效果代码
2015/10/26 Javascript
jquery+json实现数据二级联动的方法
2015/11/28 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
SVG动画vivus.js库使用小结(实例代码)
2017/09/14 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
在vscode 中设置 vue模板内容的方法
2020/09/02 Javascript
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
Python函数中定义参数的四种方式
2014/11/30 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
解决pycharm py文件运行后停止按钮变成了灰色的问题
2018/11/29 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
Python实现的拉格朗日插值法示例
2019/01/08 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
CSS3弹性盒模型开发笔记(二)
2016/04/26 HTML / CSS
HTML5 canvas实现雪花飘落特效
2016/03/08 HTML / CSS
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
英国领先的电动可调床制造商:Laybrook
2019/12/26 全球购物
酒店前台接待岗位职责
2013/12/03 职场文书
优秀演讲稿范文
2013/12/29 职场文书
工地标语大全
2014/06/18 职场文书
五年级上册复习计划
2015/01/19 职场文书
观后感开头
2015/06/19 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
餐厅营销的秘密:为什么老顾客会流水?
2019/08/08 职场文书
关于Numpy之repeat、tile的用法总结
2021/06/02 Python
解决vue $http的get和post请求跨域问题
2021/06/07 Vue.js
各种货币符号快捷输入
2022/02/17 杂记