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

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

 42745  350  查看评论 (91)
分享到微信朋友圈
X
仿美团酒店的日期插件,修改过的 ie兼容6

更新时间:2018/2/10 上午9:40:28

更新说明:修改了评论中的bug,将index.html中的index : 4,  //展示的月份个数  改为index:2,就会出现年份20的情况,具体改动位置在data.js中的118行:

for (var i = 0; i < 4; i++) {      
     var select = i;
   startDayArrayYear.push(startDayArrays[select])
}

就是把i< me.index这个改为i< 4就可以了


更新时间:2018/1/31 上午11:28:25

更新说明:谢谢热心老哥的帮忙指出bug和修改方案,bug是刚好29号,就会连着出现两个3月份,修改了date.js:

currentDate.setDate(1) currentDate.setMonth(currentDate.getMonth() + select) 还有index.html中添加了阻止默认冒泡e.stopPropagation(), e.preventDefault(), 具体如下: $('#firstSelect').on('click', function(e) {
    e.stopPropagation();
    e.preventDefault();
    $('.mask_calendar').show();
});
$('.mask_calendar').on('click', function(e) {
    e.stopPropagation();
    e.preventDefault();
    if (e.target.className == "mask_calendar") {
        $('.calendar').slideUp(200);
        $('.mask_calendar').fadeOut(200);
    }
})

更新时间: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
});
相关插件-日期和时间

时间日期控件(兼容ie6)

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

jQuery移动端时间选择插件

jQuery移动端滑动选择时间插件
  日期和时间
 27698  283

jQuery移动端时间插件

手机上选择机票的时间插件
  日期和时间
 40239  295

自定义样式日程插件(原创)

可以根据需求自定义显示样式,当前demo为显示一个周
  日期和时间
 34779  280

讨论这个项目(91)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    手冢 0
    2020/12/14 17:18:12
    怎么在第一次打开的时候默认传两个开始日期和结束日期进去 回复
    稳稳的幸福 0
    2020/3/13 9:59:08
    怎么设置开始日期可以是今天以前的日期,但是结束日期只能到当天 回复
    热心市民陈先森 0
    2020/2/18 11:37:47
    佛挡杀佛撒的发斯蒂芬是 回复
    ?团?司令 0
    2019/8/12 14:18:21
    如何禁止选择日期呢? 回复
    guxingqi 0
    2019/5/8 18:08:39
    积分不够下载,惆怅
        7277270
        2019/6/3 13:23:14
        我也是
    回复
    有什么,没什么 0
    2018/11/13 16:58:31
    如何选择当前时间以前的,不要往后的
        颖cola0
        2018/12/29 14:51:59
        看看属性,应该能控制
    回复
    有什么,没什么 0
    2018/11/13 15:25:35
    下载之后就有问题,日期框都不弹出来了 回复
    Almost lover 0
    2018/10/27 17:41:12
    有个bug 一到周六的时候 默认选中的离店日期就错了
        自由者―灵1
        2019/8/17 11:20:41

        date.js  228行 改为把if收起来改为 

        if ($(this).text() == strDays) {
            var r = index;
            $(this).append('</br><p class="rz">入住
                    ');
                    if ($(this).next().text() != "") {
                        $(this).next().append('</br><p class="rz">离店
                            ');
                        }
                        else {
                            if ($(this).parent().next().length) {
                                $(this).parent().next().find("td").eq(0).append('</br><p class="rz">离店
                                    ');
                                }
                                else {
                                    $(".dateTable").eq(1).find("td").each(function(index, el) {
                                            if ($(this).text() != "") {
                                                $(this).append('</br><p class="rz">离店
                                                    ');
                                                    return false;
                                                }
                                            });
                                    }
                                }
                                me._checkColor(me.comeColor, me.outColor);
                            }
    回复
    hexadecimal 0
    2018/10/11 11:38:54
    这个插件用着感觉挺好 回复
    -Pu 0
    2018/9/20 13:58:53
    怎么选择之前的日期 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复