<!DOCTYPE>
<HTML>
<HEAD>
<TITLE>日历</TITLE>
<!-- display:inline 行内元素,没有换行,但是改变不了width和height-->
<STYLE>
a {
/** 去掉下划线 **/
text-decoration:none
}
#YMDbox {
position:absolute;
width : 320px;
}
#prevMonth {
float : left;
margin : 1px;
width : 40px;
height : 40px;
}
#now_ymd {
float : left;
margin : 1px;
width : 208px;
height : 40px;
}
#nextMonth {
float : left;
margin : 1px;
width : 40px;
height : 40px;
text-align : right;
}
#prevMonth, #now_ymd, #nextMonth {
background-color : #FF6347;
line-height : 40px;
text-align : center;
}
#title > div {
float : left;
margin : 1px;
width : 40px;
height : 40px;
text-align : center;
line-height : 40px;
background-color : #AFEEEE;
}
#Dbox > div {
float : left;
margin : 1px;
width : 40px;
height : 40px;
text-align : center;
line-height : 40px;
/**和高度一样,才能让文字横向居中**/
background-color : #DCDCDC;
}
#Dbox div:hover {
/** 语法
*标签+:+hover
*标签+.+class属性+:+hover
**/
background-color : yellow;
}
/**
*CSS提供了四种伪类设置链接的颜色,包括:link、:visited、:hover、:active,
*它们的声明是有一定顺序的,我们将这种顺序简称为L-V-H-A,即link最先,
*其次visited,之后*hover,最后active,如此声明才能保证hover与active状态显示正确的样式
**/
</STYLE>
</HEAD>
<BODY>
<!-- p及以下元素不能包含块级元素,包含块级时P的style不能对块级产生作用 -->
<!-- <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <dt> -->
<div style="margin:100px;" id="datediv">日历 : <input id="date" type="text" size=12 style="height:40px; line-height:40px"></div>
</BODY>
<SCRIPT>
/**
*创建Day的div,每一天是一个div
*
*year:年
*month:月份;
*/
function createDayBox(year, month) {
//该月份的最大日期
var dayMax = 0;
if(month == "01" ||
month == "03" ||
month == "05" ||
month == "07" ||
month == "08" ||
month == "10" ||
month == "12"
) {
dayMax = 31;
} else if(month == "02") {//闰年
if(year%100 == 0) {
if(year%400 == 0) {
dayMax = 29;
} else {
dayMax = 28;
}
} else {
if(year%4 == 0) {
dayMax = 29;
} else {
dayMax = 28;
}
}
} else {
dayMax = 30;
}
var mm = parseInt(month) -1;
var dateByYM = new Date(year, mm, "01");
var day = dateByYM.getDay();//0~6;0是周日
var boxNum = dayMax + day;//div个数
var fbox = "";
var n = 1;
var nowDay = (new Date()).getDate();
for(var i = 1; i <= boxNum; i++) {
if(i < day + 1) {
fbox = fbox + "<div></div>";
continue;
}
if(nowDay == n) {
fbox = fbox + "<div style=\"background-color:yellow\"><a id=\"day_link\" href=\"javascript:daylink('"+ year + month + n +"')\">" + n + "</a></div>";
} else {
fbox = fbox + "<div><a id=\"day_link\" href=\"javascript:daylink('"+ year + month + n +"')\">" + n + "</a></div>";
}
n++;
}
return fbox;
}
/**
*创建日历的整体外层div
*/
function createBox() {
/*
*电脑时间表示大概
*< 2018年1月 >
*日 一 二 三 四 五 六
*/
//现在的日期
var nowDate = new Date();
var nowY = nowDate.getFullYear();
var nowM = nowDate.getMonth();//0~11
var nowD = nowDate.getDay();
nowM = nowM + 1;
if(nowM < 10) {
nowM = "0" + nowM;
}
//日历框的日期
var dateText = document.getElementById("date").value;
if(dateText) {
nowY = dateText.substring(0,4);
nowM = dateText.substring(5,7);
nowD = dateText.substring(7);
}
var box = document.createElement("div");
box.id = "YMDbox";
var obox = "<div id=\"Mbox\">"
obox = obox + "<div id=\"prevMonth\"><a id=\"monthlinkPrev\" href=\"javascript:monthlinkPrev('" + nowY + nowM + "')\"><</a></div>";
obox = obox + "<div id=\"now_ymd\">" + nowY + "年" + nowM + "月" + "</div>"
obox = obox +"<div id=\"nextMonth\"><a id=\"monthlinkNext\" href=\"javascript:monthlinkNext('" + nowY + nowM + "')\">></a></div></div>";
obox = obox +"</div>";
obox = obox + "<div id=\"title\"><div>日</div><div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div></div>";
box.innerHTML = obox;
var dbox = document.createElement("div");
dbox.id = "Dbox";
dbox.innerHTML = createDayBox(nowY, nowM);
box.appendChild(dbox);
document.body.appendChild(box);
}
/**
*日期链接的方法
*
*ymd:年月日
**/
function daylink(ymd) {
var txt = document.getElementById("date");
txt.value = ymd.substring(0,4) + "-" + ymd.substring(4,6) + "-" + ymd.substring(6);
document.body.removeChild(document.getElementById("YMDbox"));
}
/**
*前月链接的方法
*
*ym:年月
**/
function monthlinkPrev(ym) {
var year = ym.substring(0,4);
var month = ym.substring(4);
month = parseInt(month);
if(month == "1") {
month = "12";
year = --year;
} else {
month = --month;
}
if(month < 10) {
month = "0" + month;
}
monthlink(year, month);
}
/**
*下月链接的方法
*
*ym:年月
**/
function monthlinkNext(ym) {
var year = ym.substring(0,4);
var month = ym.substring(4);
month = parseInt(month);
if(month == "12") {
month = "1";
year = ++year;
} else {
month = ++month;
}
if(month < 10) {
month = "0" + month;
}
monthlink(year, month);
}
/**
*月份链接的共通处理
*
*year:年
*month:月
**/
function monthlink(year, month) {
//重新设置Mbox
var ymd = document.getElementById("now_ymd");
ymd.innerHTML = year + "年" + month + "月";
var monthlinkPrev = document.getElementById("monthlinkPrev");
var monthlinkNext = document.getElementById("monthlinkNext");
monthlinkPrev.href = "javascript:monthlinkPrev('" + year + month + "')";
monthlinkNext.href = "javascript:monthlinkNext('" + year + month + "')";
//重新设置Dbox
var dbox = document.createElement("div");
dbox.id = "Dbox";
var YMDbox = document.getElementById("YMDbox");
YMDbox.removeChild(YMDbox.lastChild);
dbox.innerHTML = createDayBox(year, month);
YMDbox.appendChild(dbox);
}
/**
*焦点事件
**/
date.onfocus = function() {
if(document.getElementById("YMDbox")) {//undefined == false
return false;
}
createBox();
var date = document.querySelector("#date");
//计算位置
//var w = date.clientWidth;
//var h = date.clientHeight;//元素的上边界到窗口的距离,不包含margin,padding,border
//var w = event.clientX;
//var h = event.clientY;//鼠标的位置,只有鼠标事件能有属性
var w = date.clientWidth;
var h = date.offsetTop + date.clientHeight;//offsetTop包含margin但是不包含height
var ymdbox = document.getElementById("YMDbox");
ymdbox.style.left = w;
ymdbox.style.top = h + 5;
};
</SCRIPT>
</HTML>
<HTML>
<HEAD>
<TITLE>日历</TITLE>
<!-- display:inline 行内元素,没有换行,但是改变不了width和height-->
<STYLE>
a {
/** 去掉下划线 **/
text-decoration:none
}
#YMDbox {
position:absolute;
width : 320px;
}
#prevMonth {
float : left;
margin : 1px;
width : 40px;
height : 40px;
}
#now_ymd {
float : left;
margin : 1px;
width : 208px;
height : 40px;
}
#nextMonth {
float : left;
margin : 1px;
width : 40px;
height : 40px;
text-align : right;
}
#prevMonth, #now_ymd, #nextMonth {
background-color : #FF6347;
line-height : 40px;
text-align : center;
}
#title > div {
float : left;
margin : 1px;
width : 40px;
height : 40px;
text-align : center;
line-height : 40px;
background-color : #AFEEEE;
}
#Dbox > div {
float : left;
margin : 1px;
width : 40px;
height : 40px;
text-align : center;
line-height : 40px;
/**和高度一样,才能让文字横向居中**/
background-color : #DCDCDC;
}
#Dbox div:hover {
/** 语法
*标签+:+hover
*标签+.+class属性+:+hover
**/
background-color : yellow;
}
/**
*CSS提供了四种伪类设置链接的颜色,包括:link、:visited、:hover、:active,
*它们的声明是有一定顺序的,我们将这种顺序简称为L-V-H-A,即link最先,
*其次visited,之后*hover,最后active,如此声明才能保证hover与active状态显示正确的样式
**/
</STYLE>
</HEAD>
<BODY>
<!-- p及以下元素不能包含块级元素,包含块级时P的style不能对块级产生作用 -->
<!-- <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <dt> -->
<div style="margin:100px;" id="datediv">日历 : <input id="date" type="text" size=12 style="height:40px; line-height:40px"></div>
</BODY>
<SCRIPT>
/**
*创建Day的div,每一天是一个div
*
*year:年
*month:月份;
*/
function createDayBox(year, month) {
//该月份的最大日期
var dayMax = 0;
if(month == "01" ||
month == "03" ||
month == "05" ||
month == "07" ||
month == "08" ||
month == "10" ||
month == "12"
) {
dayMax = 31;
} else if(month == "02") {//闰年
if(year%100 == 0) {
if(year%400 == 0) {
dayMax = 29;
} else {
dayMax = 28;
}
} else {
if(year%4 == 0) {
dayMax = 29;
} else {
dayMax = 28;
}
}
} else {
dayMax = 30;
}
var mm = parseInt(month) -1;
var dateByYM = new Date(year, mm, "01");
var day = dateByYM.getDay();//0~6;0是周日
var boxNum = dayMax + day;//div个数
var fbox = "";
var n = 1;
var nowDay = (new Date()).getDate();
for(var i = 1; i <= boxNum; i++) {
if(i < day + 1) {
fbox = fbox + "<div></div>";
continue;
}
if(nowDay == n) {
fbox = fbox + "<div style=\"background-color:yellow\"><a id=\"day_link\" href=\"javascript:daylink('"+ year + month + n +"')\">" + n + "</a></div>";
} else {
fbox = fbox + "<div><a id=\"day_link\" href=\"javascript:daylink('"+ year + month + n +"')\">" + n + "</a></div>";
}
n++;
}
return fbox;
}
/**
*创建日历的整体外层div
*/
function createBox() {
/*
*电脑时间表示大概
*< 2018年1月 >
*日 一 二 三 四 五 六
*/
//现在的日期
var nowDate = new Date();
var nowY = nowDate.getFullYear();
var nowM = nowDate.getMonth();//0~11
var nowD = nowDate.getDay();
nowM = nowM + 1;
if(nowM < 10) {
nowM = "0" + nowM;
}
//日历框的日期
var dateText = document.getElementById("date").value;
if(dateText) {
nowY = dateText.substring(0,4);
nowM = dateText.substring(5,7);
nowD = dateText.substring(7);
}
var box = document.createElement("div");
box.id = "YMDbox";
var obox = "<div id=\"Mbox\">"
obox = obox + "<div id=\"prevMonth\"><a id=\"monthlinkPrev\" href=\"javascript:monthlinkPrev('" + nowY + nowM + "')\"><</a></div>";
obox = obox + "<div id=\"now_ymd\">" + nowY + "年" + nowM + "月" + "</div>"
obox = obox +"<div id=\"nextMonth\"><a id=\"monthlinkNext\" href=\"javascript:monthlinkNext('" + nowY + nowM + "')\">></a></div></div>";
obox = obox +"</div>";
obox = obox + "<div id=\"title\"><div>日</div><div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div></div>";
box.innerHTML = obox;
var dbox = document.createElement("div");
dbox.id = "Dbox";
dbox.innerHTML = createDayBox(nowY, nowM);
box.appendChild(dbox);
document.body.appendChild(box);
}
/**
*日期链接的方法
*
*ymd:年月日
**/
function daylink(ymd) {
var txt = document.getElementById("date");
txt.value = ymd.substring(0,4) + "-" + ymd.substring(4,6) + "-" + ymd.substring(6);
document.body.removeChild(document.getElementById("YMDbox"));
}
/**
*前月链接的方法
*
*ym:年月
**/
function monthlinkPrev(ym) {
var year = ym.substring(0,4);
var month = ym.substring(4);
month = parseInt(month);
if(month == "1") {
month = "12";
year = --year;
} else {
month = --month;
}
if(month < 10) {
month = "0" + month;
}
monthlink(year, month);
}
/**
*下月链接的方法
*
*ym:年月
**/
function monthlinkNext(ym) {
var year = ym.substring(0,4);
var month = ym.substring(4);
month = parseInt(month);
if(month == "12") {
month = "1";
year = ++year;
} else {
month = ++month;
}
if(month < 10) {
month = "0" + month;
}
monthlink(year, month);
}
/**
*月份链接的共通处理
*
*year:年
*month:月
**/
function monthlink(year, month) {
//重新设置Mbox
var ymd = document.getElementById("now_ymd");
ymd.innerHTML = year + "年" + month + "月";
var monthlinkPrev = document.getElementById("monthlinkPrev");
var monthlinkNext = document.getElementById("monthlinkNext");
monthlinkPrev.href = "javascript:monthlinkPrev('" + year + month + "')";
monthlinkNext.href = "javascript:monthlinkNext('" + year + month + "')";
//重新设置Dbox
var dbox = document.createElement("div");
dbox.id = "Dbox";
var YMDbox = document.getElementById("YMDbox");
YMDbox.removeChild(YMDbox.lastChild);
dbox.innerHTML = createDayBox(year, month);
YMDbox.appendChild(dbox);
}
/**
*焦点事件
**/
date.onfocus = function() {
if(document.getElementById("YMDbox")) {//undefined == false
return false;
}
createBox();
var date = document.querySelector("#date");
//计算位置
//var w = date.clientWidth;
//var h = date.clientHeight;//元素的上边界到窗口的距离,不包含margin,padding,border
//var w = event.clientX;
//var h = event.clientY;//鼠标的位置,只有鼠标事件能有属性
var w = date.clientWidth;
var h = date.offsetTop + date.clientHeight;//offsetTop包含margin但是不包含height
var ymdbox = document.getElementById("YMDbox");
ymdbox.style.left = w;
ymdbox.style.top = h + 5;
};
</SCRIPT>
</HTML>