<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>选择日期</title> <script src="~/Scripts/jquery.1.9.1.min.js"></script> <style class="text/css"> .title { height: 10px; font-size: 25px;/*10*/ } .wek { width: 14%; height: 10px; /*margin-left: 2.1px; margin-top: -50px;*/ } .wek li { padding: 0; margin: 0; } li { list-style-type: none; /*float: left; 14%; height: 5%; /*margin-left:-12px;*/ /*text-align: center; padding: 53px 0px 4px 0px;*/ display: inline-block; width: 50px; height: 65px; text-align: center; } a{text-decoration:none; display: inline-block; } .calendarli { width: 14%; float: left; color: #828282; text-align: center; } .bodytext { height: 70%; margin-top: 90px; padding: 0; font-size: 20px; } .GroupCalendar { height: 80%; } h1 { text-align: center; display: inline; } .Yeardate { text-align: center; height: 40px; } .Yeardate a { font-size: 23px; display: inline-block; color: #000000; width:32%; } .peopNum { padding-bottom:10%; } .peopNum a { font-size: 23px; display: inline-block; color: #000000; width: 100px; background-color: #4d95eb; text-align: center; line-height: 17px; color: white; } .AdultPrice { width: 14%; text-align: center; } </style> </head> <body> <div ms-controller="groupDate"> <input type="hidden" value="@ViewData["productGuid"]" id="productGuid"/> <div class="Yeardate"> <a href="#" class="pageup" id="pageup"> < </a> <h1><span id="titleYear"></span>年<span id="titleMonth"></span>月</h1> <a href="#" class="pagedown" id="pagedown"> > </a> </div> <div style="" class="GroupCalendar"> </div> <div class="peopNum" style=" "> <table style="99%; "> <tr><td colspan="3" style="font-size:17px">选择出行人数</td></tr> <tr><td rowspan="2" style="20%;font-size:18px">成人</td><td style="50%;font-size:15px">￥<span class="AdultPrice">12</span>/人</td> <td rowspan="2" style="29% ;text-align:center;"> <a href="###" style="20%;height:20px;" id="delNum">-</a> <input type="text" style="20%;text-align:center;" id="PeopNumber" value="0" /> <a href="###" style="20%;height:20px;" id="addNum">+</a> </td> </tr> <tr><td style="color:#B7B7B7;font-size:15px">当日仅剩<b><span class="count" style="color:#FA9B15">0</span></b>席</td></tr> <tr><td rowspan="2" style="20%;font-size:18px">儿童</td><td style="50%;font-size:15px">￥<span class="ChildPrice">12</span>/人</td> <td rowspan="2" style="29% ;text-align:center;"> <a href="###" id="delNum1" style="20%;height:20px;">-</a> <input type="text" style="20%;text-align:center;" id="PeopNumber1" value="0" /> <a href="###" style="20%;height:20px;" id="addNum1">+</a> </td></tr> <tr><td style="color:#B7B7B7;font-size:15px">当日仅剩<b><span class="count" style="color:#FA9B15">0</span></b>席</td></tr> </table> </div> <div style="99.9%;margin-bottom: 0px;"> <table style="99%;"> <tr><td rowspan="2" style="40%"> <span style="font-size: 18px"><b>团期：</b></span><span class="GroupDate" style="font-size:14px;">请选择</span> </td><td style="30%;font-size:15px"><span class="AdultCount">0</span>成人</td><td rowspan="2" style="background-color:#4C93E7;text-align:center;"><a href="#" id="Next" ><span style ="color:#FCFCFC;font-size:20px">下一步</span></a></td></tr> <tr><td style ="30%;font-size:15px"><span class="child">0</span>儿童</td></tr> </table> </div> </div> </body> </html> @section Script{ <script src="~/Controll/calendar/chf_calendar.js"></script> <script> $(function () { $(".GroupCalendar").chf_calendar("@ViewData["Time"].ToString()"); loadDateList(); //上一页 var year = null; var month = null; $("#pageup").click(function() { year = $("#titleYear").text(); month = $("#titleMonth").text(); var date = new Date(year, month - 2, 1); //将原先的html替换为新的html $(".GroupCalendar").html(""); $(".GroupCalendar").chf_calendar(date); loadDateList(); }); //下一页 $("#pagedown").click(function() { year = $("#titleYear").text(); month = $("#titleMonth").text(); var date = new Date(year, month, 1); //将原先的html替换为新的html var html = ""; $(".GroupCalendar").html(html); $(".GroupCalendar").chf_calendar(date); loadDateList(); }); //成人 $("#addNum").click(function() { var nNum = $("#PeopNumber").val(); var num = parseInt(nNum) + 1; $("#PeopNumber").val(num); $(".AdultCount").html($("#PeopNumber").val()); }); $("#delNum").click(function() { var nNum = $("#PeopNumber").val(); var num = 0; if (nNum != 0) { num = nNum - 1; } $("#PeopNumber").val(num); $(".AdultCount").html($("#PeopNumber").val()); }); //儿童 $("#addNum1").click(function() { var nNum = $("#PeopNumber1").val(); var num = parseInt(nNum) + 1; $("#PeopNumber1").val(num); $(".child").html($("#PeopNumber1").val()); }); $("#delNum1").click(function() { var nNum = $("#PeopNumber1").val(); var num = 0; if (nNum != 0) { num = nNum - 1; } $("#PeopNumber1").val(num); $(".child").html($("#PeopNumber1").val()); }); }); //获取数据添加团期金额 function loadDateList() { var month = $("#titleMonth").text(); var year = $("#titleYear").text(); $.ymAjax("Product/GetAllGroupDateByProductId", "json", { productGuid: "@ViewData["productGuid"]" }, 'get', function(data) { for (var i = 0; i < data.Data.length; i++) { var d = new Date(data.Data[i].GroupTime).format("yyyy-MM-dd"); var day = new Date(d).getDate(); if ((new Date(d).getMonth() + 1) == month) { $(".calendarli").each(function() { if ($(this).text() == day) { var html = "<br/><span class="Price" style="color:#4B92E7;font-size:7px;">￥" + data.Data[i].AdultPrice + "</span>"; $(this).append(html); } }); } } }); } //格式化时间 Date.prototype.format = function(format) { var o = { "M+": this.getMonth() + 1, //month "d+": this.getDate(), //day "h+": this.getHours(), //hour "m+": this.getMinutes(), //minute "s+": this.getSeconds(), //second "q+": Math.floor((this.getMonth() + 3) / 3), //quarter "S": this.getMilliseconds() //millisecond } if (/(y+)/.test(format)) format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); for (var k in o) if (new RegExp("(" + k + ")").test(format)) format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)); return format; } </script> <script> $("#Next").click(function() { //提交跳转界面 var productGuid = $("#productGuid").val(); //@ViewData["productGuid"], var DateTime = $(".GroupDate").html(); var AdultCount = $(".AdultCount").html(); var ChildCount = $(".child").html(); var AdultPrice = $(".AdultPrice").html(); var ChildPrice = $(".ChildPrice").html(); var hasNumber = parseInt($(".count").html()); if (ChildCount + AdultCount <= 0) { return alert("人数不能为0"); } if (ChildCount + AdultCount <= hasNumber) { window.location.href = "/WeChatSite/Product/OrderGroup?productGuid=" + productGuid + "&GroupDate=" + DateTime + "&AdultCount=" + AdultCount + "&ChildCount=" + ChildCount + "&AdultPrice=" + AdultPrice + "&ChildPrice=" + ChildPrice; } else { alert("剩余空位不足，请重新选择"); } }); </script> }
(function (window, $, undefined) { //方法参数项 $.calendarClass = { title: "<div class="title"><ul style="padding:0;" ><li class="wek"style="color:#4B92E7">日</li><li class="wek">一</li><li class="wek">二</li><li class="wek">三</li><li class="wek">四</li><li class="wek">五</li><li class="wek" style="color:#4B92E7">六</li></ul><hr></br></div>", //获取月天数 GetmonthDays: function(d) { //console.log(d); var date = d.getFullYear(); var monthArr = null; if (date % 4 == 0) { monthArr = ["31", "29", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"]; } else { monthArr = ["31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"]; } return monthArr[d.getMonth()]; }, //根据时间获取今天几号 GetDate: function(d) { date = d.getDate(); //console.log(date); }, //获取周几 GetDay: function(d) { return d.getDay(); }, }, $.extend($.fn, { //加载项 chf_calendar: function(option) { var date; //判断参数是否为空 if (option == null) { date = new Date(); } else { date = new Date(option); //若参数不为空，将参数转换为时间类型 } $(this).AddChild(date); //给这些li添加方法，重新加载界面时 要重新加载js生成界面的时间，才能供日常使用 //点击日历某月某号的事件 $(".calendarli").click(function () { //获取点击的时间的详细信息，然后格式化时间，将时间绑定到控件 var Guid = $("#productGuid").val(); var year = $(this).attr("year"); var month = $(this).attr("month"); var day = $(this).attr("date"); date = year + "-" + month+ "-" + day; $.ymAjax("Product/GetAllGroupDateByProductId", "json", { productGuid: Guid }, 'get', function (data) { console.log(data.Data.length); for (var i = 0; i < data.Data.length; i++) { var d = new Date(data.Data[i].GroupTime).format("yyyy-MM-dd"); console.log(i+"."+date + "-----------------" + d); if (new Date(date).format("yyyy-MM-dd") == d) { $(".count").text(data.Data[i].Count); $(".AdultPrice").text(data.Data[i].AdultPrice); $(".ChildPrice").text(data.Data[i].ChildPrice); break; }else { $(".count").text("0"); $(".AdultPrice").text("0"); $(".ChildPrice").text("0"); } } }); $(".GroupDate").html(date); }); }, //根据时间来拼接日历显示 AddChild: function(d) { var html = ""; html += $.calendarClass.title; html += "<ul class="bodytext">"; var time = new Date(d.getFullYear(), d.getMonth(), 1); if (time.getDay() == 0) { //判断本月1号是否是周日 for (var day = 1; day <= $.calendarClass.GetmonthDays(d); day++) { html += "<li class="calendarli" year="" + d.getFullYear() + "" month="" + (d.getMonth() + 1) + "" date="" + day + "">" + day + "</li>"; $("#titleYear").html(d.getFullYear()); $("#titleMonth").html((d.getMonth() + 1)); } } else { for (var beday = 0; beday < time.getDay(); beday++) { html += "<li class="calendarli" > </li>"; } for (var day = 1; day <= $.calendarClass.GetmonthDays(d); day++) { html += "<li class="calendarli" year="" + d.getFullYear() + "" month="" + (d.getMonth() + 1) + "" date="" + day + "">" + day + "</li>"; $("#titleYear").html(d.getFullYear()); $("#titleMonth").html((d.getMonth() + 1)); } } html += "</ul>"; $(this).append(html); }, }); })(window, jQuery);