日期:2014-05-16  浏览次数:20580 次

JS日历插件

很多搜索用到了日期,有些查询需要精确到具体的时间,很多日历插件只是有日期而没有时间,于是通过强大的网络搜索找到了一款功能非常强大的日历插件JS Calendar。此插件支持多种皮肤,多国语言,更重要的是有很多插件没有的选择时间的功能。

?? 在运用过程中遇到些小的问题:

??? 1. 时间显示格式为12小时格式

????????根据参数选择时间为12小时显示或24小时显示,选择时间日期以后都是以12小时格式显示,经过对源码的分析,发现在对时间判断大于12时会对时间进行-12操作,只需要把jscal2.js中找到“ j=i?h-12:h ” 将其修改为 “ j=i?h:h” 即可。

??? 2. 时间显示没有秒数

??????? JS Calendar插件没有找到能够显示出秒数的参数,但是在调用插件时可以选择显示的格式形如“dateFormat: "%Y-%m-%d %I:%M %p" ” 但是由于%p是用来显示AM和PM的参数,于是将此修改为“dateFormat: "%Y-%m-%d %I:%M:00 ”于是就会输出选定时间但是秒数为0的时间了。

??? 3. 选择分钟的时候是以5分钟为单位

??????? 在jscal2.js源码中找到“minuteStep:5”修改为“minuteStep:1”即可。

写个小demo方便大家使用:

<script src="../src/js/jscal2.js"></script>
 <script src="../src/js/lang/cn.js"></script>
<!--cn.js为中文语言包,en.js为英文--><link rel="stylesheet" type="text/css" href="../src/css/jscal2.css">
<label for="f_rangeStart">选择日期:</label> <input id="f_rangeStart" name="starttime"> <script type="text/javascript">
  RANGE_CAL_1 = new Calendar({
          inputField: "f_rangeStart",  //选择的日期会输入到此id的文本输入框中
          dateFormat: "%Y-%m-%d %I:%M %p", //输出的日期格式,可根据自己的需要修改连接符,格式以及更改年月日的位置等
          trigger: "f_rangeStart",  //点击触发出现日历的id,这里选择的是点击文本框显示日历
          showTime   : 12,           //12小时格式显示日期 ,若需要24小时显示设置为true 如果不需要时间这里可以把showTime这个参数去掉,也可值为空
          onSelect: function() {
                  var date = Calendar.intToDate(this.selection.get());
                  LEFT_CAL.args.min = date;
                  LEFT_CAL.redraw();
                  this.hide();
          }
  });
</script>
?