仿美团酒店的日期插件,修改过的

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

仿美团酒店的日期插件,修改过的 ie兼容6

更新时间:2017/11/28 上午9:14:10

更新说明:解决弹窗打开之后直接点确认的话显示的天数就没了


更新时间:2017/11/20 上午8:55:09

更新说明:解决了只选一个,提示出选择离店日期,然后往下滑,这个提示不被上面的盖住,也就是z-index优先级问题


更新时间:2017/11/11 上午9:55:16

更新说明:解决点击空白处隐藏日期


配置如下:

$('#firstSelect').calendarSwitch({
    selectors: {
        sections: ".calendar"
    },
    index: 4, //展示的月份个数
    animateFunction: "fadeToggle", //动画效果
    controlDay: true, //知否控制在daysnumber天之内,这个数值的设置前提是总显示天数大于90天
    daysnumber: "10", //控制天数
    comeColor: "#2EB6A8", //入住颜色
    outColor: "#2EB6A8", //离店颜色
    comeoutColor: "#E0F4F2", //入住和离店之间的颜色
    callback: function() { //回调函数
        /*var startDate = $('#startDate').val().replace(/[^0-9]/ig, "");
        var endDate = $('#endDate').val().replace(/[^0-9]/ig, "");
        var NumDate = endDate-startDate;*/
        var startDate = $('#startDate').val();
        var endDate = $('#endDate').val();
        startDate = startDate.replace(/-/g, '/');
        var date1 = new Date(startDate);
        date1 = date1.getTime();
        endDate = endDate.replace(/-/g, '/');
        var date2 = new Date(endDate);
        date2 = date2.getTime();
        var NumDate = parseInt(date2) - parseInt(date1);
        //计算晚数
        $('.NumDate').text(NumDate / 1000 / 60 / 60 / 24);
        $('.mask_calendar').fadeOut(200);
        /*$('.body_box').css({
            'position':'static'
        });*/
        $('html').css({
            "overflow": "auto"
        });
        $('body').css({
            "overflow": "auto"
        });
        //下面做ajax请求
        //show_loading();
        // var bdate = $(".datepicker").val().replace("年","-").replace("月","-").replace("日","");
        /*$.post("{php echo $this->createMobileUrl('ajaxData')}",{ac:'time', bdate:startDate, day:NumDate, hid:'{$hid}'},function(data){
            data = eval("(" + data +")");
            if(data.result==1){
                location.href = data.url;
            } else {
                return false;
            }
        });*/
    },
    comfireBtn: '.comfire' //确定按钮的class或者id
});
相关插件-日期和时间

jQuery移动端入住时间择插件

移动端酒店入住和离开时间一次性选择插件,界面一般但是功能绝对OK
  日期和时间
 6535  23

原生JS仿Mac OS日历

原生JS仿Mac OS日历,简洁美观
  日期和时间
 7278  26

时间日期控件(兼容ie6)

支持时间日期选取,兼容IE6及以上版本
  日期和时间
 29231  66

漂亮的日历插件

带农历的js日历插件
  日期和时间
 16589  71

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

    manxiaoq 0
    2018/1/17 9:00:06
    作者你好,请问一下,如果要对入住日期进行限制,对离店日期不限制,应该在哪修改呢?
        manxiaoq0
        2018/1/17 13:42:25

        已解决

    回复
    王圣元 0
    2018/1/16 17:23:20

    显示$不是个方法    用的你的jq

    回复
    BURT回头看见门 0
    2017/12/29 14:49:23

    月份有问题,二月显示不出来,连着两个都是三月

        付出,收获。0
        2017/12/30 8:47:13

        谢谢提醒,晚点再搞搞

        付出,收获。0
        2018/1/1 10:20:55

        怎么又正常了。。。你看看

    回复
    ° 我们不懂 0
    2017/12/26 17:37:45

    你好  我想问下 你这个是酒店式日期     就是可不可以在你的基础上  改成单日期预约  只选择一个

        付出,收获。0
        2017/12/28 8:42:26
        可以的。。现在比较忙哦。。你可以进data.js试试改改代码
    回复
    manxiaoq 0
    2017/12/13 15:48:30

    楼主你插件写的很好啊,就直接拿来用了,棒!求打赏地址,支持一下!

    回复
    柏拉图 0
    2017/12/7 17:41:56

       插件很好哦  但是我现在有个需求就是想让今天之前的日期也可以选中怎么办呢

        付出,收获。0
        2017/12/12 8:44:12
        需要在data.js里面改,最近没啥时间,有时间再弄下哈
        付出,收获。0
        2017/12/12 16:52:56

        你好,如果全部都可以点击的话,就可以在data.js中的259行中的  me._selectDate(arry)  这个注释掉,然后在234到236行的     

        for (var i = 0; i < strDays - 1; i++) {
            $(arry[i]).css('color', '#ccc');
        }

        也注释掉就可以了 。。。谢谢提问^_^

        付出,收获。1
        2017/12/12 16:54:58

        在data.js中的259行中的 

        me._selectDate(arry1)

        这个不是注释掉,这个是改成 

         me._selectDate(arry)

        也就是将括号里的arry1改为arry

    回复
    丿微眸丶?? 0
    2017/11/29 17:21:29
    此颜差矣 0
    2017/11/24 11:20:17
    新手 已下载  有个问题 弹窗打开之后直接点确认的话天数就没了
        付出,收获。1
        2017/11/28 9:07:42

        不好意思现在看到,在data.js的163行加个判断就可以了,已解决在提交审核,代码如下:

        //添加晚数
        if ($('.lidian_hover').text() != "") {
            var NumDate = $('.lidian_hover').text().replace(/[^0-9]/ig, "");
            $('.NumDate').text(NumDate);
        }
        付出,收获。0
        2017/11/28 9:11:49

        新的已经解决了,谢谢提问^_^

    回复
    木风 0
    2017/11/20 19:40:51

    有参数可以知道入住和离开分别是星期几吗?

        付出,收获。1
        2017/11/21 8:52:46

        你好,可以通过在回调方法中调用这个方法哦

         var w1 = getMyDay(new Date(startDate));
         var w2 = getMyDay(new Date(endDate));
        
         function getMyDay(date) {
             var week;
             if (date.getDay() == 0) week = "周日"
             if (date.getDay() == 1) week = "周一"
             if (date.getDay() == 2) week = "周二"
             if (date.getDay() == 3) week = "周三"
             if (date.getDay() == 4) week = "周四"
             if (date.getDay() == 5) week = "周五"
             if (date.getDay() == 6) week = "周六"
             return week;
         }

        一开始没封装进去,主要是没这个业务需求哦,你可以写个方法去转换下,就可以得到入住星期和离店星期了

    回复
    SiriBen 0
    2017/11/15 9:52:52

    不错的,不过有一点点小欠缺,就是 点“共X晚”是正确的,但是点两边的日期位置,下方弹出日期选择,上面的日期会显示出鼠标点击的光标

        付出,收获。0
        2017/11/20 8:48:06

        你是说鼠标默认的cursor会换吗,还是选中了文字,这些自己加点css属性就行了,老哥能再说详细点吗

    回复
取消回复