js自定义日历
Posted 倔小强
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js自定义日历相关的知识，希望对你有一定的参考价值。
<!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; width: 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="width:99%; "> <tr><td colspan="3" style="font-size:17px">选择出行人数</td></tr> <tr><td rowspan="2" style="width:20%;font-size:18px">成人</td><td style="width:50%;font-size:15px">￥<span class="AdultPrice">12</span>/人</td> <td rowspan="2" style="width:29% ;text-align:center;"> <a href="###" style="width:20%;height:20px;" id="delNum">-</a> <input type="text" style="width:20%;text-align:center;" id="PeopNumber" value="0" /> <a href="###" style="width: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="width:20%;font-size:18px">儿童</td><td style="width:50%;font-size:15px">￥<span class="ChildPrice">12</span>/人</td> <td rowspan="2" style="width:29% ;text-align:center;"> <a href="###" id="delNum1" style="width:20%;height:20px;">-</a> <input type="text" style="width:20%;text-align:center;" id="PeopNumber1" value="0" /> <a href="###" style="width: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="width:99.9%;margin-bottom: 0px;"> <table style="width:99%;"> <tr><td rowspan="2" style="width:40%"> <span style="font-size: 18px"><b>团期：</b></span><span class="GroupDate" style="font-size:14px;">请选择</span> </td><td style="width: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 ="width: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); $(".AdultCountVSCode自定义代码片段12——JavaScript的Promise对象