zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    第一讲 递归与循环3
    第一讲 递归与循环2
    第一讲 递归与循环1
    [转]批处理
    VBA运算符(九)
    VBA常量(八)
    VBA变量(七)
    VBA输入框(InputBox)(六)
    VBA消息框(MsgBox)(五)
    VBA宏注释(四)
  • 原文地址:https://www.cnblogs.com/coderxiaobai/p/13577537.html
Copyright © 2011-2022 走看看