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);
$(
".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>
}
View Code
(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);
View Code

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com