特效介绍
Ecalendar.jquery.min.js是一款基于jQuery的简洁强大UI美观的个性多功能日期时间选择插件。ECalendar 提供了WEB时间日历选择趋近完美的解决方案。
它使用方便,提供了各种配置参数,还提供了回调函数。而且有九种颜色的皮肤供选择,只要在配置中指明皮肤的索引即可。
在选择时间上,非常的具有个性,看上面的图就明白了,当调用时,type的参数为time时,按下日期,不要松开,会弹出两个圆环,内圆为12小时制,外圆为24小时制,拖动鼠标转动即可选择对应的时间,非常方便。
使用方法
1、引入相关js和css
<link rel="stylesheet" href="css/style.css" /> <script src="js/jQuery-2.1.4.min.js"></script> <script src="js/Ecalendar.jquery.min.js"></script>2、html代码:
<div class="calendarWarp"> <input type="text" name="date" class='ECalendar' id="ECalendar_date" /> </div>3、调用Ecalendar
<script type="text/javascript"> $(function(){ $("#ECalendar_date").ECalendar({ type:"time", //模式,time: 带时间选择; date: 不带时间选择; stamp : false, //是否转成时间戳,默认true; offset:[0,2], //弹框手动偏移量; format:"yyyy年mm月dd日", //时间格式 默认 yyyy-mm-dd hh:ii; skin:3, //皮肤颜色,默认随机,可选值:0-8,或者直接标注颜色值; step:10, //选择时间分钟的精确度; callback:function(v,e){} //回调函数 }); }) </script>