jquery 日期插件datePicker使用
1.将下载下来的DatePicker压缩包解压后整个放入项目中,不可只引入js和css
2.在html中指定input位置加上class="Wdate"(默认样式不加也可正常显示),然后指定id(利用jquery绑定事件,也可使用js的方式,直接onclick="WdatePicker()")
假设id="time",则点击事件如下:
$("#time").click(function () {
WdatePicker({
onpicked:function(){
chaseTime = $("#time").val();
}
});
});
3.WdatePicker()参数中写属性,如position位置属性等,可添加skin:'whyGreen'参数给日期控件换皮肤,示例为点击日期后触发事件作参数{onpicked:function(){}},然后就可以使用指定的id获取到value值为点击的日期传到后台了,但是出现个问题是需要点两次输入框才可弹出日期控件。
解决方案一:
1.在input标签中加上onclick事件 onclick="WdatePicker({startDate:'%y-%M-%d ',maxDate:'%y-%M-%d',dateFmt:'yyyy-MM-dd ',autoPickDate:true})" ,目的是使每点击一次日期就弹出日期控件。
2.上面第二个步骤中的click方法改为focus方法(不能同时为click和onclick,会造成无效)。
3.在WdatePicker函数后面加上 $("#time").blur(); ,目的是使每次点击日期后都失焦,这样就可以完成功能了。
解决方案二:
方案一略微繁琐,主要是有一些问题,比如说上面的maxDate:'%y-%M-%d'已经设置了当前日期为最大日期,但是用方案一的方法有时候会失效,下面介绍方案二:
1.在input标签中加上onclick或onfocus事件 onclick="WdatePicker({startDate:'%y-%M-%d ',maxDate:'%y-%M-%d',dateFmt:'yyyy-MM-dd ',autoPickDate:true})" ,目的是使每点击一次日期就弹出日期控件。
2.上面第二个步骤中的click方法改为change方法(不能同时为click和onclick,会造成无效)。
解决方案三:
按方案二的来也有问题,就是选中日期后无法触发onpicked函数,原因是WdatePicker内部会对change进行其他设置,进而失效,所以引出方案三:
1.onclick="WdatePicker({startDate:'%y-%M-%d ',maxDate:'%y-%M-%d',dateFmt:'yyyy-MM-dd ',autoPickDate:true})"
在上面加入onpicked:changeTime,然后js中写函数就可以拿到选中日期值了,onclick可以换成onfocus效果一样,但是onfouc多次刷新后日期控件会点击不弹出,存在bug,不如onclick好,推荐onclick。onclick也有问题,就是多次刷新后需要点击两次控件才弹出来。
function changeTime(){
$("#id").val()
}
2.也可加清空的触发操作,类似onpicked,添加oncleared即可。
4.效果如下:

5.压缩包路径自取:
链接:https://pan.baidu.com/s/17eFYpUhqOW4AnIeB7sNYQw
提取码:66jq
6.官方文档地址:
http://www.my97.net/demo/index.htm
jquery 日期插件datePicker使用的更多相关文章
- jquery日期插件datePicker
index.html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equi ...
- jquery日期插件jquery.datePicker参数
1.效果图 2.引入JS.CSS文件 jquery-ui.min.css和jquery-ui.min.js文件 Includes: core.js, widget.js, mouse.js, posi ...
- JQuery日期插件
JQuery是一款非常优秀的脚本框架,其丰富的控件使用起来也非常简单,配置非常灵活.下面做一个使用日期插件datapicker的例子. 1.下载jQuery核心文件就不用说了吧,datepicker是 ...
- jquery 日历插件datepicker格式调整
<script> $(function() { $("#datepicker").datepicker({ dateFormat: "yy/mm/dd&quo ...
- js 日期插件 datepicker
点击图片出现 时间 ,增加一个点击事件 <label for="" class="width80">创建日:</label> < ...
- jquery 日期插件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- DateTimePicket jQuery 日期插件,开始时间和结束时间示例
需要引入的js文件: <input type="text" id="startTime" placeholder="开始时间"/> ...
- jQuery常用插件大全
1.五星级插件jRating 详细文档介绍:http://www.myjqueryplugins.com/jquery-plugin/jrating 2.图片展示插件Swiper和Slider swi ...
- Bootstrap日期插件中文实现
Bootstrap的相关JS和CSS直接跳过. <script type="text/javascript" src="static/js/jquery-1.9.1 ...
随机推荐
- ArcMap操作随记(7)
1.栅格分辨率调整 [重采样] 2.点集数据对插值模型精度检验 test数据→[子集要素](地统计分析)→train→[插值]→[多值提取至点]→[字段计算器](Abs([value]-[spline ...
- 微信Native支付
微信Native支付对接(扫码) 由于有业务需求对接了微信和paypal支付,这边做个记录 微信支付开发文档:https://pay.weixin.qq.com/wiki/doc/api/index. ...
- python3判断一个数是否为素数
while True: num = int(input('请输入一个数:')) for i in range(2,num):#判断在num之前的数能不能把num整除 if(num%i == 0): p ...
- openEuler网络配置+换源+桌面环境ukui等基本环境部署
镜像下载.域名解析.时间同步请点击阿里云开源镜像站 1.网络配置 你可以选择查看官方文档进行配置:配置网络 (openeuler.org) 接下来的操作基本都需要root权限,所以直接使用root用户 ...
- CentOS 8 EOL如何切换源?
镜像下载.域名解析.时间同步请点击 阿里巴巴开源镜像站 CentOS 8操作系统版本结束了生命周期(EOL),Linux社区已不再维护该操作系统版本.建议您切换到Anolis或Alinux.如果您的业 ...
- [SPDK/NVMe存储技术分析]011 - 内核态ib_post_send()源码剖析
OFA定义了一组标准的Verbs,并在用户态提供了一个标准库libibverbs.例如将一个工作请求(WR)放置到发送队列的Verb API是ibv_post_send(), 但是在Linux内核,对 ...
- loj3161「NOI2019」I 君的探险(随机化,整体二分)
loj3161「NOI2019」I 君的探险(随机化,整体二分) loj Luogu 题解时间 对于 $ N \le 500 $ 的点,毫无疑问可以直接 $ O(n^2) $ 暴力询问解决. 考虑看起 ...
- idea执行maven命令的三种方式
前言: java开发的IDE工具idea默认会提供maven生命周期的图形化执行,但是如果我们需要定制化的执行命令的时候,就需要使用手动执行maven命令的方式,今天就和大家讲一下idea手动执行ma ...
- github新手使用指南
常用命令: Git 速查表(摘自 AI有道) 一.常见命令 git init : 初始化 git 仓库,即将一个文件夹初始化为一个 git 仓库.具体的操作是创建一个 .git 隐藏文件夹 git ...
- CentOS7防火墙开启与关闭以及开放6379,3306,80等端口
CentOS7用firewall防火墙替代了原来的iptables,所以我们应该使用firewall的一些命令.如下:1.关闭防火墙 systemctl stop firewalld.service ...