万年历
万年历.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="万年历.css">
</head>
<body>
<div class="calender container">
<button id="btn1">
< </button>
<select name="years" id="thisYear">
</select> 年
<select name="months" id="thisMonth">
</select> 月
<button id="btn2">></button>
<div>输入年月进行跳转:(2010/12 or 2011-12)</div>
<input type="text" value="">
<span>日期格式输入不合格</span>
<ul class="week_list">
<li>星期日</li>
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
<li>星期六</li>
</ul>
<ul class="days_list">
</ul>
</div>
</body>
</html>
万年历.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
img {
vertical-align: bottom;
border: 0;
}
.container {
width: 600px;
margin: 0 auto;
}
.calender{
height:600px ;
}
.calender ul{
width:550px;
display: flex;
flex-wrap: wrap;
}
.calender .week_list li{
width: 55px;
height: 55px;
text-align: center;
margin-right: 20px;
border-radius: 50%;
line-height: 55px;
background:rgba(12, 11, 11,0.3) ;
}
.days_list .li2 {
width: 55px;
height: 55px;
text-align: center;
margin-right: 20px;
border-radius: 50%;
line-height: 55px;
border:1px solid rosybrown;
}
.blankLi{
width: 55px;
height: 55px;
text-align: center;
margin-right: 20px;
border-radius: 50%;
line-height: 55px;
}
span {
display: none;
color:red;
}
万年历.js
<script src="jquery1.9.1.js"></script>
<script>
function setDefaultDate(year, month) {
month = (month.toString().length == 1) ? ("0"+month) : month;
//当前日期 yyyy-MM或yyyy/MM
return year.toString() + '-' + month || year.toString() + '/' + month;
}
$(document).ready(function () {
var date = new Date();
var $years = $("select[name='years']");
var year = date.getFullYear();
var day = date.getDate();
for (let i = 1900; i <= 3000; i++) {
$years.append("<option value=" + i + ">" + i + "</option>");
}
$years.find("option[value=" + year + "]").prop("selected", true);
var $months = $("select[name='months']");
var month = date.getMonth() + 1;
for (let i = 1; i <= 12; i++) {
$months.append("<option value=" + i + ">" + i + "</option>")
}
$months.find(":nth-child(" + month + ")").prop("selected", true);
$("input").val(setDefaultDate(year, month))
getYearMonthDay(year, month);
$(".days_list li:nth-child(7n)").css("color", "red")
$(".days_list li:nth-child(7n+1)").css("color", "red")
$(".li2").eq(day - 1).css("color", "yellow");
$(document).on("click", "#btn1", function () {
var monthVal = parseInt($('[name=months]').select().val())
var yearVal = parseInt($('[name=years]').select().val())
var month = monthVal - 1;
if (month == 0) {
month = 12;
yearVal = yearVal - 1;
$("[name=years]").val(yearVal);
}
$("[name=months]").val(month);
$("input").val(setDefaultDate(yearVal, month))
$(".days_list").empty();
getYearMonthDay(year, month);
$(".days_list li:nth-child(7n)").css("color", "red")
$(".days_list li:nth-child(7n+1)").css("color", "red")
});
$(document).on("click", "#btn2", function () {
var monthVal = parseInt($('[name=months]').select().val())
var yearVal = parseInt($('[name=years]').select().val())
var month = monthVal + 1;
if (month == 13) {
month=1;
yearVal = yearVal + 1;
$("[name=years]").val(yearVal);
}
$("[name=months]").val(month);
$("input").val(setDefaultDate(yearVal, month))
$(".days_list").empty();
getYearMonthDay(year, month);
$(".days_list li:nth-child(7n)").css("color", "red")
$(".days_list li:nth-child(7n+1)").css("color", "red")
});
$(document).on("change", "[name=years]", function () {
var monthVal = parseInt($('[name=months]').select().val())
var yearVal = parseInt($('[name=years]').select().val())
$("input").val(setDefaultDate(yearVal, monthVal))
$(".days_list").empty();
getYearMonthDay(yearVal, monthVal);
$(".days_list li:nth-child(7n)").css("color", "red")
$(".days_list li:nth-child(7n+1)").css("color", "red")
});
$(document).on("change", "[name=months]", function () {
var monthVal = parseInt($('[name=months]').select().val())
var yearVal = parseInt($('[name=years]').select().val())
$("input").val(setDefaultDate(yearVal, monthVal))
$(".days_list").empty();
getYearMonthDay(yearVal, monthVal);
$(".days_list li:nth-child(7n)").css("color", "red")
$(".days_list li:nth-child(7n+1)").css("color", "red")
});
$(document).on("keyup", "input", function () {
var dateStr = $("input").val();
var dateZz = /^[1-2]\d{3}[-/]([1-9]|((0[1-9])|(1[0-2])))$/;
if (dateZz.test(dateStr)) {
if (dateStr.search("-") != -1) {
$("span").css("display", "none")
var year = dateStr.split("-")[0]
var month =parseInt(dateStr.split("-")[1])
}
if (dateStr.search("/") != -1) {
$("span").css("display", "none")
var year = dateStr.split("/")[0]
var month =parseInt(dateStr.split("/")[1])
}
$("[name=years]").val(year);
$("[name=months]").val(month);
$(".days_list").empty();
getYearMonthDay(year, month);
$(".days_list li:nth-child(7n)").css("color", "red");
$(".days_list li:nth-child(7n+1)").css("color", "red");
} else {
$("span").css("display", "block")
}
})
function getYearMonthDay(year, month) {
var date = new Date(year, month - 1, 1)
var weekday = date.getDay();
var days = new Date(year, month, 0).getDate();
var str = "";
for (let i = 0; i < weekday; i++) {
str += `<li class="blankLi"></li>`
}
$(".days_list").append(str)
for (let k = 1; k <= days; k++) {
$(".days_list").append(`<li class="li2">${k}</li>`)
}
}
})
</script>