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. OpenCv基础_三

    轮廓检测 图像金字塔 上采样,图像变大一倍,矩阵用0填充 img = cv2.imread('1,jpg') cv_show('img',img) up = cv2.pyrUp(img) cv_sho ...

  2. ubuntu21.10搭建jenkins和gitlab自动化部署环境

    镜像下载.域名解析.时间同步请点击阿里云开源镜像站 前置环境: vmware pro 16 + ubuntu21.10 安装gitlab 搭建ssh远程 打开终端 sudo apt-get insta ...

  3. Spring Cloud Alibaba 之 Nacos

    Nacos 技术讲解 一提到分布式系统就不的不提一下 CAP 原则 什么是CAP CAP原则又称CAP定理,指的是在一个分布式系统中,一致性(Consistency).可用性(Availability ...

  4. PHP--腾讯云服务器上部署LNMP环境

    本文参考 云服务器上部署Laravel的实例教程 腾讯云 创建 Laravel5.4 项目 阿里云服务器部署php的laravel项目,在阿里云买ECS 搭建 Linux+Nginx+Mysql+PH ...

  5. 华为云图引擎服务 GES 实战——创图

    本实验主要是熟悉 GES 的创图操作,GES 创图的大致流程如下所示. 环境准备 上传数据 导入元数据 创建图 环境准备 由于 GES 的原始数据是存在 OBS 上的,如果 OBS 上没有桶,需要按照 ...

  6. JDBC中的Statement 和PreparedStatement的区别?

    PreparedStatement是预编译的SQL语句,效率高于Statement. PreparedStatement支持操作符,相对于Statement更加灵活. PreparedStatemen ...

  7. Ribbon负载均衡能干什么?

    (1)将用户的请求平摊的分配到多个服务上 (2)集中式LB即在服务的消费方和提供方之间使用独立的LB设施(可以是硬件,如F5, 也可以是软件,如nginx), 由该设施负责把访问请求通过某种策略转发至 ...

  8. Spring @Configuration继承

    Bean定义继承 Bean定义可以包含许多配置信息,包括构造函数参数,属性值和特定于容器的信息,例如初始化方法,静态工厂方法名称等.子bean定义从父定义继承配置数据.子定义可以覆盖某些值或根据需要添 ...

  9. 使用redis作为django缓存数据库

    1.Redis的Windows版本.打开https://github.com/MSOpenTech/redis/releases下载msi安装包.该版本是64位.安装msi过程中,有个选项是否加入系统 ...

  10. 面试问题之C++语言:面向对象的三大特性

    转载于:https://www.cnblogs.com/BEN-LK/p/10720249.html 面向对象的三大特性:封装.继承.多态 封装:就是把客观事物封装成抽象的类,并且类可以把自己的数据和 ...