建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery时间选择插件jcDate.js

来源:易助科技网浏览量:13收藏

简介

jcDate.js是一款JQuery时间选择插件,可以让用户通过简单的鼠标操作快速地选择日期。

(下载的附件中附有DEMO)



使用

1.  引入文件


<link rel="stylesheet" type="text/css" href="jcDate.css"/>
<script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script src="jQuery-jcDate.js"></script>


2.  HTML


<input class="jcDate"/><input class="jcDate1"/>


3.  调用

<script type="text/javascript">
  $(function (){
    $(".jcDate").jcDate({
      Class : "", 
      //为input注入自定义的class类(默认为空)
      Default: "2021-04-06", 
      //设置默认日期(默认为当天)
      Event : "click", 
      //设置触发控件的事件,默认为click
      Speed : 100,
      //设置控件弹窗的速度,默认100(单位ms)
      Left : 0,
      //设置控件left,默认0
      Top : $('input.jcDate')[0].getBoundingClientRect().height, 
      //设置控件top,默认为input.jcDate框的高度
      Format : "-", 
      //设置控件日期样式,默认"-",效果例如:XXXX-XX-XX
      DoubleNum: true, 
      //设置控件日期月日格式,默认true,例如:true:2015-05-01 false:2015-5-1
      Timeout : 100,
      //设置鼠标离开日期弹窗,消失时间,默认100(单位ms)
      OnChange: function() {
        //设置input中日期改变,触发事件,默认为function(){}
        console.log('num change');
      }
    });	
    
    $(".jcDate1").jcDate({
      Class : "", 
      //为input注入自定义的class类(默认为空)
      Default: "2021-04-08", 
      //设置默认日期(默认为当天)
      Event : "click", 
      //设置触发控件的事件,默认为click
      Speed : 100,
      //设置控件弹窗的速度,默认100(单位ms)
      Left : 0,
      //设置控件left,默认0
      Top : $('input.jcDate')[0].getBoundingClientRect().height,
      //设置控件top,默认为input.jcDate框的高度
      Format : "-",
      //设置控件日期样式,默认"-",效果例如:XXXX-XX-XX
      DoubleNum: true,
      //设置控件日期月日格式,默认true,例如:true:2015-05-01 false:2015-5-1
      Timeout : 100,
      //设置鼠标离开日期弹窗,消失时间,默认100(单位ms)
      OnChange: function() {
        //设置input中日期改变,触发事件,默认为function(){}
        console.log('num change');
      }
    });
  });
</script>



相关链接

Gitee 地址 :https://gitee.com/mirrors/jquery-jcdate/tree/master