jQuery扁平化多色时间日历插件ECalendar

所属分类:输入-日期和时间

jQuery扁平化多色时间日历插件ECalendar ie兼容9

更新时间:2017/5/20 下午9:03:02

更新说明:修改分钟是整点的话  会默认少一个0 的BUG,手机模式浏览   callbackk is not defined 的BUG


更新时间:2017/5/3 下午10:33:03

更新说明:修改了选中的日期点击不能正常选择时分的BUG


ECalendar使用方法

ECalendar 日历插件多功能jQuery日期控件 ECalendar 提供了WEB时间日历选择趋近完美的解决方案。引用文件:

<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>

调用代码:

<div class="calendarWarp">
	<input type="text" name="date" class='ECalendar' id="ECalendar_date"  value="2017-3-1 15:32"/>
</div>

<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>
相关插件-日期和时间

仿百度日历老黄历功能,带节日

功能简单强大,代码带注释,数据接入一目了然
  日期和时间
 15012  177

jquery日历插件jquery-datepicker-skins

8款绚丽jQuery日历选择器源代码
  日期和时间
 13478  32

mobiscroll_手机上下滚动选择日期时间

可以上下滚动选择年月日时分秒
  日期和时间
 23766  175

移动端万年历类型(滑动效果)

基于swiper的万年历模板,简单,移动端日历
  日期和时间
 10976  103

讨论这个项目(30)回答他人问题或分享插件使用方法奖励jQ币

    船长?? 0
    2017/5/27 12:00:28
    能不能限制只可以选今天往后3天的日期,楼主,,,看这里,,,,看这里
        尔雅视觉0
        2017/5/27 13:12:08

        不好意思呢, 没有做这个限制呢,我抽空看看能不能加上去

        船长??0
        2017/5/27 15:05:22
        不麻烦你的,我自己倒腾吧。一直在看你的源码,感觉不错呢。一些小的改动很顺手;我加你QQ好不好,以后一起玩耍啊~~~
        尔雅视觉0
        2017/5/27 15:45:48

        78692640

    回复
    qftyui1 0
    2017/5/25 18:10:19

    能精确到每分钟就更好了

        尔雅视觉1
        2017/5/26 11:39:11

        可以的,把step:10改成1,就可以精确到每分钟了, 但用鼠标拖,很难控制的精准

    回复
    LG 0
    2017/5/24 9:48:38
    这个日历兼容性怎么样呢? 回复
    0
    2017/5/23 16:19:55
    故事与你° 0
    2017/5/18 14:39:57

    确实强大,但问题来了,为什么所有的交互事件不是绑定的$(this),导致我绑定多个同类class的时候时间插件总在最后一个显示,导致table里面没法用,总不可能循环一个个单独绑定啊。。。

        尔雅视觉1
        2017/5/20 21:09:52

        哎呀, 这个是我的项目里面用的一个小插件,没有考虑那么多啊, 用

        $(".xxx").echo(function(){$(this).ECalendar()})

        绑定吧。嘿嘿

    回复
    peitds17 0
    2017/5/17 10:20:43

    表示有回调函数这样子的插件才好用。。

        尔雅视觉0
        2017/5/20 21:07:07

        本来就有回调函数啊,您看一下最后一个案例

    回复
    安徽巴克德 0
    2017/5/16 15:48:09
    Merbromin。 0
    2017/5/10 14:28:34

    有一个小bug  如果选择的小时是整点的话  会默认少一个0         2017-5-10 18:0

        根红苗正好青年0
        2017/5/16 18:25:55

        这个解决了吗?

        尔雅视觉0
        2017/5/20 21:08:33

        解决了

    回复
    Merbromin。 0
    2017/5/9 18:43:39

    为什么用工具栏切换装置切换成手机模式浏览  会报这个错【callbackk is not defined】

        根红苗正好青年0
        2017/5/16 18:25:12

        直接在源码里删除没问题

        尔雅视觉0
        2017/5/20 21:05:01

        是我太大意了, 已经修改了

    回复
    williamfse7en 0
    2017/5/4 11:15:49
取消回复