首页 > 特效插件 > 日期时间 >  多功能jQuery日期时间插件ECalendar正文

多功能jQuery日期时间插件ECalendar

特效介绍
ECalendar日期选择插件

    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>