可滑动日期的场地申请_白澜_前端开发者

先上图

 

 

 

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

  <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;  
        }
    #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;  
        }

    #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");
    }
/**************************************************截取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");
    }

/**************************************************截取url参数**************************************************/var//场地类型var//场地名称function getUrlData() {
var window.location.search;
url
);
var {};
if) {
url
);
forvar) {
var);
dataObj[arr[
];
}
}
else {
url
);
dataObj[url[
];
}
return dataObj;
}

/**************************************************初始化加载数据**************************************************/varnew//时间var//可视界面宽度
get_month_day();
//加载日期//加载对应日期数据//加载日期function get_month_day() {
var initTime.getFullYear();
var;
var initTime.getDate();

$();
forvar) {

varnew);
varnew Date(newDate).getDay();
if day)
var;
elsevar;
$(
).append(li);
}
//计算,使初始化加载的日期在中间位置var//a标签(日期)所占宽度var//a标签(日期)距离窗口左边的距离);

$();
}

//加载数据function getSite() {

var initTime.getFullYear();
var;
var initTime.getDate() : initTime.getDate();
var;
var;
var 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) {
casebreak;
casebreak;
casebreak;
casebreak;
casebreak;
casebreak;
casebreak;
}
$(
).html(week_day);

//当前选中日期数据 $.ajax({
url: config.url()
Math.random(),
dataType:
,
type:
,
data: { siteID: siteID, STime: STime, ETime: ETime },
//场地id,开始时间,结束时间 xhrFields: {
withCredentials:
true
},
success:
function (res) {
var;
$(
).append(table);
if) {
forvar) {
varnewnewnew Date(res[i].StartTime).getHours();
varnewnewnew Date(res[i].StartTime).getMinutes();
var sMin;
varnewnewnew Date(res[i].EndTime).getHours();
varnewnewnew Date(res[i].EndTime).getMinutes();
var eMin;
var;
$(
).append(row);
}
$(
).html(siteName);
}
else {
$(
);
}
}
})
}

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

//加载上个月数据function goPre() {
initTime
new));
initTime
new));
$(
);
$(
).empty();
$(
).empty();
get_month_day();
//加载日期//加载对应日期数据
}
//加载下个月数据function goNext() {
initTime
new));
initTime
new));
$(
);
$(
).empty();
$(
).empty();
get_month_day();
//加载日期//加载对应日期数据
}
//本月切换日期//选中后不再触发点击事件function a_click(obj) {
var $(obj).text();
var selectTime;
initTime
new Date(Time);
//为上一个选中日期添加选中事件,移除现在选中日期的默认样式并添加选中样式,为上一个选中日期添加默认样式);
$(
);
$(obj).removeClass(
);
//加载数据的时候,页面会闪动,用动画效果来平滑过渡);
$(
).empty();
getSite();
//为避免事件中途因意外停止,在点击事件完成后再移除现在选中日期的点击事件);
}

 

» 本文来自:前端开发者 » 《可滑动日期的场地申请_白澜_前端开发者》
» 本文链接地址:https://www.rokub.com/73733.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!