注: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>
分享到:
相关推荐
js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js...
基于javascript脚本的网页日历控件,格式为2013-01-01
个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件
js日历控件js日历控件js日历控件js日历控件js日历控件js日历控件js日历控件js日历控件js日历控件js日历控件
js日历控件日历插件 如何使用已写在js文本里,欢迎下载!
js 日历控件 calendar,js 日历控件 calendar,js 日历控件 calendar,js 日历控件 calendar,js 日历控件 calendar,js 日历控件 calendar
js日历控件优化,含时分秒,年月日,很好用,,js日历控件优化,含时分秒,年月日,很好用,,js日历控件优化,含时分秒,年月日,很好用,,
js日历控件 js日历控件 js日历控件 js日历控件 js日历控件
1个很牛的JS日历控件1个很牛的JS日历控件1个很牛的JS日历控件1个很牛的JS日历控件1个很牛的JS日历控件1个很牛的JS日历控件1个很牛的JS日历控件1个很牛的JS日历控件1个很牛的JS日历控件1个很牛的JS日历控件1个很牛的...
js日历控件实例源码 js日历控件实例源码
6种JavaScript日历控件,任君选择
简单好看的js日历控件
js日历控件,控件可以实现,单击文本框,产生日历控件,然后选择日期,自动显示。
3款简洁的JS日历插件,实现网页上的JavaScript日历选择功能,内含有详细的调用说明,上手容易,附带有文档。calendar1调用方法:引入script src="js/calendarDateInput.js" 在calendardateinput.js修改图片的路径。
js日历控件 用于web
js日历控件 精确分
js日历控件代码及用法
这是一个功能强大的js日期控件,引用时加写: onfocus="showCalendar(this);