`
alfred_long
  • 浏览: 561610 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JS日历插件

阅读更多

注:My97DatePicker这款插件在时间选择上更加方便和快捷 推荐

很多搜索用到了日期,有些查询需要精确到具体的时间,很多日历插件只是有日期而没有时间,于是通过强大的网络搜索找到了一款功能非常强大的日历插件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>
 

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics