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 ...
 
随机推荐
- e值计算来了
			
e值该如何计算呢? 若关于ex幂级数展开 ex=1+x+x2/2!+x3/3!+•••+xn/n! 取x=1,有e=1+1/2+1/6+••• 接下来就是十分简单的编程 这里选用了python语言(当 ...
 - .user.ini文件构成的PHP后门
			
.user.ini.它比.htaccess用的更广,不管是nginx/apache/IIS,只要是以fastcgi运行的php都可以用这个方法.我的nginx服务器全部是fpm/fastcgi,我的I ...
 - 手把手带你使用ZigBee——通过爱智控制EFR32,以及 Simplicity Studio 使用过程中注意事项
			
前言 兄弟们,我发现一个有意思的东西,我在爱智官网翻资料的时候,发现他们终于终于把官网文档的索引优化了!有一说一,真是方便不少,终于不再是一堆文档糊在一坨了. 另外我还发现他们居然做了一个EFR32的 ...
 - Java study 4
			
JAVA 学习第四天 今日学习内容 快捷键.复习.注释.字面量 快捷键 学习地址:IJ快捷键 复习 jdk下载.安装.部署环境.第一个Java程序入门学习,环境变量path 注释 注释:顾名思义就是用 ...
 - 华为云图引擎服务 GES 实战——创图
			
本实验主要是熟悉 GES 的创图操作,GES 创图的大致流程如下所示. 环境准备 上传数据 导入元数据 创建图 环境准备 由于 GES 的原始数据是存在 OBS 上的,如果 OBS 上没有桶,需要按照 ...
 - 随意写文件命令?怎么向屏幕输出带空格的字符串,比如”hello world”?
			
写文件命令:vi 向屏幕输出带空格的字符串:echo hello world
 - Oracle问题解决记录
			
一.前言 oracle这么一个庞大的东西,出点问题真是太常见了.开个博客,用于记录遇到的问题吧. 持续更新. 二.问题列表 归档日志满,引起的问题. 一台服务器,用了很久了,某天,出现了磁盘空间占满的 ...
 - 为什么要用 Spring Boot?
			
Spring Boot 优点非常多,如:独立运行简化配置自动配置无代码生成和XML配置应用监控上手容易Spring Boot 集这么多优点于一身,还有理由不使用它呢?
 - 什么是微服务架构中的 DRY?
			
DRY 代表不要重复自己.它基本上促进了重用代码的概念.这导致开发和共享库, 这反过来导致紧密耦合.
 - servlet中的ServletConfig对象
			
ServletConfig对象对应web.xml文件中的<servlet>节点.当Tomcat初始化一个Servlet时,会创建ServletConfig对象,并将该Servlet的配置信 ...