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