可滑动日期的场地申请

先上图

 

 

 

　　<header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title" id="site_name">预约情况</h1>
    </header>
    
    <div class="mui-content">
        <div id="selecttime"></div>
        
        <div id="weekday"></div>

        <div id="siteinfo" style="width:100%"></div>

        <button class="btn">预约</button>
    </div>

　　　　#selecttime {
            display:inline-block;
            width: 100%;
            height:40px;
            line-height: 40px;
            white-space: nowrap;
            box-shadow: 0 1px 2px rgba(0,0,0,.1);
            overflow-x: scroll;
            overflow-y: hidden;
            -webkit-backface-visibility: hidden;
            -webkit-perspective: 1000;
            -webkit-overflow-scrolling: touch;
            text-align: justify;
            padding: 0px 5px;
            box-sizing: border-box;
        }
        #selecttime a{
            text-decoration: none;
            margin-right: 10px;
            padding:5px;
        }
        #selecttime::-webkit-scrollbar{
            display: none;
        }
        #weekday {
            width:40px;
            height:40px;
            border-radius:50%;
            margin:12px 0 0 12px;
            text-align:center;
            line-height:40px;
            background:rgba(255,128,128,1);
            color:white;
            box-shadow:3px 3px 5px black;
        }
        .weekdayselected {
            font-size:20px;
            font-weight:bold;
            color:rgba(255,128,128,1);
        }
        table tr td {
            padding:10px;
        }
        .sitename {
            height:60px;
            background:#c2c2c2;
            border-radius:6px;
            text-align:center;
        }
        .time {
            width:40%;
            height:40px;
            background:rgba(255,128,172,1);
            border-radius:6px;
            text-align:center;
            color:white;
        }
        .reason {
            height:40px;
            background:rgba(113,184,255,1);
            border-radius:6px;
            text-align:right;
            color:white;
        }
       
        .a_fontcolor {
            color:#999999;
        }    
        .btn {
            width:90%;
            height:50px;
            background:rgba(38,153,251,1);
            color:white;
            border-radius:6px;
            display:block;
            margin:50px auto;
            font-size:18px;  
        }

/**************************************************截取url参数**************************************************/

    var siteid = geturldata().id;//场地类型
    var sitename = decodeuri(geturldata().name);//场地名称
    function geturldata() {
        var url = window.location.search;  
        url = url.substring(1); 
        var dataobj = {};
        if (url.indexof('&') > -1) {
            url = url.split('&');
            for (var i = 0; i < url.length; i++) {
                var arr = url[i].split('=');
                dataobj[arr[0]] = arr[1];
            }
        }
        else {
            url = url.split('=');
            dataobj[url[0]] = url[1];
        }
        return dataobj;
    }

    /**************************************************初始化加载数据**************************************************/
    
    var inittime = new date();//时间
    var client_width = window.innerwidth || document.documentelement.clientinnerwidth || document.body.clientinnerwidth;//可视界面宽度

    get_month_day();//加载日期
    getsite();//加载对应日期数据
   
    //加载日期
    function get_month_day() {
        var year = inittime.getfullyear();
        var month = inittime.getmonth() + 1;
        var day = inittime.getdate();
        
        $("#selecttime").append('<a onclick="gopre()">&lt&ltgo</a>');
        for (var i = 1; i <= getdaysinmonth(year, month) ; i++) {

            var newdate = new date().setdate(i - 1);
            var weekday = new date(newdate).getday();
            if (i == day)
                var li = '<a class="weekdayselected">' + month + '-' + i + '</a>';
            else
                var li = '<a class="a_fontcolor" onclick="a_click(this)">' + month + '-' + i + '</a>';
            $("#selecttime").append(li);
        }
        //计算，使初始化加载的日期在中间位置
        var width = $(".weekdayselected").width(); //a标签（日期）所占宽度
        var marginleft = $(".weekdayselected").offset().left; //a标签（日期）距离窗口左边的距离
        $("#selecttime").scrollleft(marginleft - client_width / 2 + width / 2);

        $("#selecttime").append('<a onclick="gonext()">go&gt&gt</a>');
    }

    //加载数据
    function getsite() {
        
        var year = inittime.getfullyear();
        var month = inittime.getmonth() + 1 < 10 ? "0" + (inittime.getmonth() + 1) : inittime.getmonth() + 1;
        var day = inittime.getdate() < 10 ? "0" + inittime.getdate() : inittime.getdate();
        var stime = year + "-" + month + "-" + day + " 00:00:00";
        var etime = year + "-" + month + "-" + day + " 23:59:59";
        var week_day = inittime.getday();

        /******************************************
            console.log("当前时间:" + inittime);
            console.log("当前年份:" + year);
            console.log("当前月份:" + month);
            console.log("当前天数:" + day);
            console.log("当前周几:" + week_day);
            console.log("开始时间:" + stime);
            console.log("结束时间:" + etime);
        ******************************************/

        //当前选中日期为星期几
        switch (week_day) {
            case 0: week_day = "日"; break;
            case 1: week_day = "一"; break;
            case 2: week_day = "二"; break;
            case 3: week_day = "三"; break;
            case 4: week_day = "四"; break;
            case 5: week_day = "五"; break;
            case 6: week_day = "六"; break;
        }
        $("#weekday").html(week_day);

        //当前选中日期数据
        $.ajax({
            url: config.url() + "/workcenter/ajax/getdata.ashx?type=siteapplication&r=" + math.random(),
            datatype: 'json',
            type: 'post',
            data: { siteid: siteid, stime: stime, etime: etime },//场地id，开始时间，结束时间
            xhrfields: {
                withcredentials: true
            },
            success: function (res) {
                var table = '<table width="100%" style="border-collapse:separate; border-spacing:15px;" id="sitelist">' +
                                    '<tr><td colspan="2" class="sitename"></td></tr>' +
                                '</table>';
                $("#siteinfo").append(table);
                if (res.length > 0) {
                    for (var i = 0; i < res.length; i++) {
                        var shou = new date(res[i].starttime).gethours() < 10 ? "0" + new date(res[i].starttime).gethours() : new date(res[i].starttime).gethours();
                        var smin = new date(res[i].starttime).getminutes() < 10 ? "0" + new date(res[i].starttime).getminutes() : new date(res[i].starttime).getminutes();
                        var starttime = shou + ":" + smin;
                        var ehou = new date(res[i].endtime).gethours() < 10 ? "0" + new date(res[i].endtime).gethours() : new date(res[i].endtime).gethours();
                        var emin = new date(res[i].endtime).getminutes() < 10 ? "0" + new date(res[i].endtime).getminutes() : new date(res[i].endtime).getminutes();
                        var endtime = ehou + ":" + emin;
                        var row = '<tr><td class="time">' + starttime + '-' + endtime + '</td><td class="reason">' + res[i].siteschedulename + '</td></tr>';
                        $("#sitelist").append(row);
                    }
                    $(".sitename").html(sitename);
                }
                else {
                    $(".sitename").html("暂无预约");
                } 
            }
        })
    }

    /**************************************************调用方法**************************************************/
    
    //计算本月天数
    function getdaysinmonth(year, month) {
        //本来标准时间的month应该为当前month-1，这里就使用当前month作为标准时间的month
        month = parseint(month);
        //转化为标准时间后为下一个月的数据，设置day为0表示上个月最后一天，这样就切换到了所求月份的最后一天
        var temp = new date(year, month, 0);
        return temp.getdate();
    }

    //加载上个月数据
    function gopre() {
        inittime = new date(inittime.setdate(1));
        inittime = new date(inittime.setmonth(inittime.getmonth() - 1));
        $("#siteinfo").hide().show(500);
        $("#selecttime").empty();
        $("#siteinfo").empty();
        get_month_day();//加载日期
        getsite();//加载对应日期数据
       
    }
    //加载下个月数据
    function gonext() {
        inittime = new date(inittime.setdate(1));
        inittime = new date(inittime.setmonth(inittime.getmonth() + 1));
        $("#siteinfo").hide().show(500);
        $("#selecttime").empty();
        $("#siteinfo").empty();
        get_month_day();//加载日期
        getsite();//加载对应日期数据
       
    }
    //本月切换日期
    //选中后不再触发点击事件
    function a_click(obj) {
        var selecttime = $(obj).text();
        var time = inittime.getfullyear() + "-" + selecttime;
        inittime = new date(time);
        //为上一个选中日期添加选中事件，移除现在选中日期的默认样式并添加选中样式，为上一个选中日期添加默认样式
        $("#selecttime .weekdayselected").attr("onclick", "a_click(this);");
        $("#selecttime .weekdayselected").removeclass("weekdayselected").addclass("a_fontcolor");
        $(obj).removeclass("a_fontcolor").addclass("weekdayselected");
        //加载数据的时候，页面会闪动，用动画效果来平滑过渡
        $("#siteinfo").hide().show(500);
        $("#siteinfo").empty();
        getsite();
        //为避免事件中途因意外停止，在点击事件完成后再移除现在选中日期的点击事件
        $(obj).removeattr("onclick");
    }