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使用的更多相关文章

  1. jquery日期插件datePicker

    index.html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equi ...

  2. jquery日期插件jquery.datePicker参数

    1.效果图 2.引入JS.CSS文件 jquery-ui.min.css和jquery-ui.min.js文件 Includes: core.js, widget.js, mouse.js, posi ...

  3. JQuery日期插件

    JQuery是一款非常优秀的脚本框架,其丰富的控件使用起来也非常简单,配置非常灵活.下面做一个使用日期插件datapicker的例子. 1.下载jQuery核心文件就不用说了吧,datepicker是 ...

  4. jquery 日历插件datepicker格式调整

    <script> $(function() { $("#datepicker").datepicker({ dateFormat: "yy/mm/dd&quo ...

  5. js 日期插件 datepicker

    点击图片出现  时间 ,增加一个点击事件 <label for="" class="width80">创建日:</label> < ...

  6. jquery 日期插件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. DateTimePicket jQuery 日期插件,开始时间和结束时间示例

    需要引入的js文件: <input type="text" id="startTime" placeholder="开始时间"/> ...

  8. jQuery常用插件大全

    1.五星级插件jRating 详细文档介绍:http://www.myjqueryplugins.com/jquery-plugin/jrating 2.图片展示插件Swiper和Slider swi ...

  9. Bootstrap日期插件中文实现

    Bootstrap的相关JS和CSS直接跳过. <script type="text/javascript" src="static/js/jquery-1.9.1 ...

随机推荐

  1. LCD1602----LiquidCrystal库的使用1

    一:硬件介绍: 1.引脚定义: 2.屏幕介绍: 1602液晶也叫1602字符型液晶,它是一种专门用来显示字母.数字.符号的点阵型液晶模块.它是由若干个5x7或者5x10的点阵字符位组成,每个点阵字符位 ...

  2. MySQL between and 边界测试

    看到有一些博客说 between and 有不含边界的情况,于是测试了一把,记录如下.先说结论:between and 不存在不含边界的情况 1. between and 是包含边界的 id betw ...

  3. python3判断一个数是否为素数

    while True: num = int(input('请输入一个数:')) for i in range(2,num):#判断在num之前的数能不能把num整除 if(num%i == 0): p ...

  4. 关于alertmanager报No private IP address found, and explicit IP not provided

    ./alertmanager --config.file=alertmanager.yml level=info ts=2021-11-22T05:53:11.195Z caller=main.go: ...

  5. 【Vulnhub练习】Billu_b0x

    靶机说明 虚拟机难度中等,使用ubuntu(32位),其他软件包有: PHP apache MySQL 目标 Boot to root:从Web应用程序进入虚拟机,并获得root权限. 运行环境 靶机 ...

  6. FOC实现概述

    FOC原理框图如下: 其中涉及到两种坐标转换: 1. Clark变换:常规的三相坐标系→静止的二相坐标系α.β 正变换矩阵 $\left[ {\begin{array}{*{20}{c}}{\sqrt ...

  7. SVPWM实现概述

    SVPWM是FOC的基础,其实现流程大致如下所示: 1. 判断合成矢量所在扇区 2. 计算相邻矢量作用时间 3. 计算各桥臂导通时间 4. 得到各相PWM占空比 5. 更新相应寄存器值  SVPWM目 ...

  8. Ubuntu16.04 搭建samba服务器

    1昨天花了一天时间弄了NFS服务器,结果搭建完之后出现各种问题,要么挂载不上,要么就是字符乱码.今天在看到一个关于树莓派的介绍的时候,提到Samba服务器的搭建,我尝试了一下,结果发现很顺利地就能够正 ...

  9. [vmware to openstack] 安装virtio驱动

    描述   从vmware的虚拟机迁移到opensatck,由于vmware虚拟机磁盘类型采用的是scsi,要迁移到opensatck平台运行,发现虚拟机无法起来,原因是vmware虚拟机没有安装vir ...

  10. 数据结构-二叉树、B树、B+树、B*树(整理版)

    1. 二叉树 二叉树的特点: ① 所有非叶子节点至多拥有两个儿子(Left和Right): ② 所有节点存储一个关键字: ③ 非叶子节点的左指针指向小于其关键字的子树,右指针指向大于其关键字的子树: ...