2017-07-04 Jquery日历
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>日历</title>
<style type="text/css">
.mySelfDate{
width:336px;
height:auto;
margin:100px auto;
background-color:#fff;
border-radius:5px;
padding-bottom:20px;
overflow:hidden;
}
.mySelfDate_Top{
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
background-color: #E9B02D;
}
.mySelfDate_Top span{
display:inline-block;
}
.myPrevMonth,.myNextMonth{
width: 10px;
height: 13px;
overflow: hidden;
position: relative;
}
.myPrevMonth img {
position: absolute;
top: 1px;
left: 4px;
cursor:pointer;
}
.myNextMonth img {
position: absolute;
top: 1px;
right: 4px;
cursor:pointer;
}
#showDate{
width:200px;
font-size: 14px;
color: #FFF;
margin:0 20px;
}
.mySelfDate_Week{
width:100%;
height:30px;
line-height:30px;
}
.mySelfDate_Week span{
display: inline-block;
width: 48px;
text-align: center;
float: left;
font-family: "宋体";
font-size: 12px;
color: #000;
font-weight: bold;
}
#Container{
width: 100%;
height: auto;
overflow: hidden;
}
#Container div{
line-height:30px;
width: 48px;
float: left;
text-align: center;
}
#Container div span{
display: inline-block;
width:30px;
color: #000;
border-radius: 5px;
font-size: 12px;
}
.Container_Div_Span{
cursor:pointer;
}
</style>
</head>
<body style="background-color:#000">
<div class="mySelfDate">
<div class="mySelfDate_Top">
<span class="myPrevMonth"><img src="images/sj.png"></span>
<span id="showDate">2017年7月4日</span>
<span class="myNextMonth"><img src="images/sj.png"></span>
</div>
<div class="mySelfDate_Week">
<span>一</span>
<span>二</span>
<span>三</span>
<span>四</span>
<span>五</span>
<span>六</span>
<span>七</span>
</div>
<!--表格日期主显示区域-->
<div id="Container"></div>
</div>
<script type="text/javascript" src="javascript/jquery-1.7.min.js"></script>
<script type="text/javascript">
/**
* Created by Administrator on 2015/12/3.
*/
$(function(){
var myShowHeiht = null;
var today = new Date();
var year = today.getFullYear(); //本年
var month = today.getMonth()+1; //本月
var myMonth = month;
var day = today.getDate(); //本日
$("#showDate").html(year+"年"+month+"月");
calendar(year,month,day);
//点击上一个月时触发的事件
$(".myPrevMonth").click(
function(){
myArry = [];
month = month-1;
if(month >= 1){
$("#showDate").html(year+"年"+month+"月");
showDate_NowValue = $("#showDate").html().split("年")[1].split("月")[0] ;
}else{
year = year-1;
month = 12;
$("#showDate").html(year+"年"+month+"月");
showDate_NowValue = $("#showDate").html().split("年")[1].split("月")[0] ;
}
calendar3(year,month,myMonth);
}
)
//=================================点击上一个月时触发的事件结尾处========================================================================
//点击下一个月时触发的事件
$(".myNextMonth").click(
function(){
myArry = [];
month = month+1;
if(month <= 12){
$("#showDate").html(year+"年"+month+"月");
showDate_NowValue = $("#showDate").html().split("年")[1].split("月")[0] ;
}else{
year = year+1;
month = 1;
$("#showDate").html(year+"年"+month+"月");
showDate_NowValue = $("#showDate").html().split("年")[1].split("月")[0] ;
}
calendar3(year,month,myMonth);
}
)
//=================================点击下一个月时触发的事件结尾处========================================================================
//实现日历
function calendar(year,month,day) {
//本月第一天是星期几（距星期一离开的天数）
var startDay = new Date(year, month - 1, 1).getDay()==0?startDay=7: new Date(year, month - 1, 1).getDay();
//本月有多少天(即最后一天的getDate()，但是最后一天不知道，我们可以用“上个月的0来表示本月的最后一天”)
var nDays = new Date(year, month, 0).getDate();
//上个月有多少天
var prevMonthDays = new Date(year,month-1,0).getDate();
//本月最后一天是星期几（距星期一离开的天数）
var endDay = new Date(year, month - 1,nDays).getDay();
//开始画日历
var numRow = 0; //记录行的个数，到达7的时候创建tr
var i; //日期
var html = '';
//第一行
for (i = 1; i < startDay; i++) {
html += '<div><span style="color:#999">'+(prevMonthDays-startDay+i+1)+'</span></div>';
numRow++;
}
//中间
for (var j = 1; j <= nDays; j++) {
if( j == day ){
html += '<div><span style="color:#fff;height:30px;background-color:#E9B02D;border-radius:50%;" class="Container_Div_Span">'+j+'</span></div>';
}else{
html += '<div><span class="Container_Div_Span">'+j+'</span></div>';
}
numRow++;
}
//最后一行
for(i = 1 ; i <= 7-endDay;i++ ){
html += '<div><span style="color:#999">'+i+'</span></div>';
numRow++;
}
for( i = 1 ; i <= 42 - numRow ; i++ ){
html += '<div><span style="color:#999">'+(6-endDay+i+1)+'</span></div>';
}
document.getElementById("Container").innerHTML = html;
$(".Container_Div_Span").click(
function(){
var myDate = $(this).text();
myDate = year+'-'+month+'-'+myDate
console.log(myDate)
}
)
}
//实现日历2
function calendar3(year,month,myMonth) {
//本月第一天是星期几（距星期一离开的天数）
var startDay = new Date(year, month - 1, 1).getDay()==0?startDay=7: new Date(year, month - 1, 1).getDay();
//本月有多少天(即最后一天的getDate()，但是最后一天不知道，我们可以用“上个月的0来表示本月的最后一天”)
var nDays = new Date(year, month, 0).getDate();
//上个月有多少天
var prevMonthDays = new Date(year,month-1,0).getDate();
//本月最后一天是星期几（距星期一离开的天数）
var endDay = new Date(year, month - 1,nDays).getDay();
//开始画日历
var numRow = 0; //记录行的个数，到达7的时候创建tr
var i; //日期
var html = '';
//第一行
for (i = 1; i < startDay; i++) {
html += '<div><span style="color:#999">'+(prevMonthDays-startDay+i+1)+'</span></div>';
numRow++;
}
//中间
for (var j = 1; j <= nDays; j++) {
if( j == day && month == myMonth ){
html += '<div><span style="color:#fff;height:30px;background-color:#E9B02D;border-radius:50%;" class="Container_Div_Span">'+j+'</span></div>';
}else{
html += '<div><span class="Container_Div_Span">'+j+'</span></div>';
}
numRow++;
}
//最后一行
for(i = 1 ; i <= 7-endDay;i++ ){
html += '<div><span style="color:#999">'+i+'</span></div>';
numRow++;
}
for( i = 1 ; i <= 42 - numRow ; i++ ){
html += '<div><span style="color:#999">'+(6-endDay+i+1)+'</span></div>';
}
document.getElementById("Container").innerHTML = html;
$(".Container_Div_Span").click(
function(){
var myDate = $(this).text();
myDate = year+'-'+month+'-'+myDate
console.log(myDate)
}
)
}
})
</script>
</body>
</html>
