jquery 日期插件datePicker使用

时间：2024-03-01 12:47:33

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

 

相关文章