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

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

 17045  74  查看评论 (71)
仿美团酒店的日期插件,修改过的 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
});
相关插件-日期和时间

一款精简实用的时间轴插件一timeline

一款精简实用的时间轴插件
  日期和时间
 16803  47

jQuery弹出双日期选择插件doubleDate.js

jQuery弹出双日期选择插件doubleDate.js
  日期和时间
 16955  50

js css3扁平化APP图标时钟动画

js css3扁平化APP图标时钟动画
  日期和时间
 6611  23

jQuery移动端日期和时间插件

移动端日期和时间,完全兼容PC端和移动,做了完善,完全兼容
  日期和时间
 39143  69

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

    空心菜没有心 0
    2018/7/5 8:57:34
    if ($(this).next().text() != "") {
        $(this).next().append('</br><p class="rz">结束
            ');
        }
        else if ($(this).parent("tr").next("tr").find("td").eq(0).text() != "") {
            $(this).parent("tr").next("tr").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;
                            }
                        });
                }

    这里多加一个判断 ,作者只判断了最后一天选择下个月的第一天,选择下一个tr  td 的第一天没判断到

        空心菜没有心1
        2018/7/5 8:59:17
        date.js 233行
    回复
    美国超人有裤衩? 0
    2018/6/28 16:23:49
    如何选择入住日期(例如:2018-06-28)和离店日期(例如:2018-06-28)为同一天 回复
    0
    2018/6/8 16:42:52
    作者 看到请回复下我呗 万分感谢了!
    用这个插件 我只想选中一个日期,也就是单日期, 这个里面有个什么判断 我必须选中两个日期才可以
    我应该怎么改呢????? 回复
    杨光-黑龙江亿林网络股 0
    2018/6/8 10:52:59
    我想把入住换成开始,离店换成结束,都换完 入住的值就出现问题了
        杨光-黑龙江亿林网络股0
        2018/6/8 13:15:24
        没事了 解决了
    回复
    William 0
    2018/6/7 16:05:31
    添加了插件a标签无法跳转?怎么弄? 回复
    dVey 0
    2018/6/2 12:19:07
    日期初始化有问题,应加入初始化默认时间,不然现在不选择的话一直显示1晚 回复
    William 0
    2018/6/1 10:42:24
    作者大大,怎么设置默认最少入住时间为30天? 回复
    东北红土 0
    2018/5/31 13:56:42
    Ok. 0
    2018/5/24 16:13:57
    如何得到上个页面传过来的时间字符串,初始化到这个插件里面?貌似没有提供接口,要另外写吗?
        Ok.0
        2018/5/24 16:33:25
        是要在内部的 _initselected: function() 做修改吗?
        Ok.0
        2018/5/25 11:46:56
        写了从外部获取的时间,超过离店时间的月份不知道怎么写,还有这个要怎么测试跨年的?
        ( ⊙o⊙ )0
        2018/6/21 18:07:59
        怎么从外部获取时间的啊 求教大佬
    回复
    流年 0
    2018/5/15 16:59:18
    我要获取获取今天以前的日期 并且放到上边 该怎么办啊 回复
取消回复