日历控件

来源：互联网发布：炒股软件免费编辑：程序博客网时间：2024/06/11 18:58

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
.wrap {
width: 210px;
}
.dateRows {
display: table;
width: 100%;
}
.dateRows span {
display: table-cell;
height: 20px;
text-align: center;
width: 14%;
cursor: pointer;
}
.week-title {
display: table;
width: 100%;
}
.week-title span {
display: table-cell;
height: 20px;
text-align: right;
}
.year-title {
display: table;
width: 100%;
}
.year-title span {
display: table-cell;
}
.year-text {
width: 60%;
text-align: center;
}
.sel_btn {
width: 20%;
text-align: center;
cursor: pointer;
}
.current {
background-color: #ccc;
}

</style>
</head>
<body>
<script type="text/javascript" src="core.js"></script>
<script type="text/javascript">
// var date = new Date();
// console.log(date.getSeconds());
(function() {
var calendar = function(el) {
this.wrap = document.getElementById(el);
this.viewId = el + 'view';
this.bigM = ['1', '3', '5', '7', '8', '10', '12']//大月31天
this.text = {}
this.text.en = {
M : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'Aguest', 'September', 'October', 'November', 'December'],
m : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
d : ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat'],
D : ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
a : ['am', 'pm'],
A : ['AM', 'PM']
}
self = this;
var unit = {
y : 0,
m : 0,
d : 0,
h : 0,
i : 0,
s : 0
}
self.Date = new Date();
self.init(unit);
}
calendar.prototype.init = function(unit) {
var rd = self.getDate(unit);
//console.log(rd);
self.Date.setFullYear(rd.y);
self.Date.setMinutes(rd.i);
self.Date.setHours(rd.h);
self.Date.setMonth(rd.m);
self.Date.setDate(rd.d);
self.Date.setMinutes(rd.i);
self.Date.getMilliseconds(rd.s);
self.view(rd);
var prev_m = document.getElementById('prev_m');

prev_m.onclick = function() {
var unit = {
y : 0,
m : -1,
d : 0,
h : 0,
i : 0,
s : 0
}
self.init(unit);

}
//下个月
var next_m = document.getElementById('next_m');
next_m.onclick = function() {
var unit = {
y : 0,
m : 1,
d : 0,
h : 0,
i : 0,
s : 0
}
self.init(unit);
}
}
calendar.prototype.view = function(date) {
var view = document.getElementById(self.viewId);
if(!view) {
view = document.createElement('div')
}
var dates = [];
var d = self.Date;
var current = d.getDate() ? d.getDate() : 0;
// console.log(current)
d.setDate(1);
//确定周一是几号
var c = d.getDay();
for( i = 0; i < c; i++) {
dates.push('<span> </span>');
}
d.setDate(current)
for( i = 1; i < date.mDate + 1; i++) {
var c = '';
if(i == current)
c = ' class="current" ';
var str = '<span ' + c + ' _value="'+i+'">' + i + '</span>';
dates.push(str);
}
var dl = dates.length
if(dl % 7 != 0) {
var n = 7 - dl % 7;
for( i = 0; i < n; i++) {
dates.push('<span> </span>');
}
}
var z = 0;
var datesStr = '<div class="dateRows">';
for( i = 0; i < dates.length; i++) {
datesStr += dates[i];
z++;
if(z == 7) {
datesStr += '</div><div class="dateRows">';
z = 0;
}
}
var dm = date.m + 1;
datesStr += '</div>';
var str = '<div id="' + self.viewId + '">';
str += "<div class='year-title' ><span id='prev_m' class='sel_btn'><</span><span class='year-text'>" + date.y + ' ' + dm + "</span><span class='sel_btn' id='next_m'>></span></div>";
str += "<div class='week-title'>";
for( i = 0; i < 7; i++) {
str += '<span>' + self.text.en['d'][i] + '</span>';
}
str += '</div>';
str += '<div id="dateBox">' + datesStr + '<div>';
self.wrap.innerHTML = str;
dateBox = document.getElementById('dateBox');
dateBox.onclick = self.click;
dateBox.ondblclick = self.dbclick;
self.dateBox = dateBox;
}
//单击
calendar.prototype.click = function(e) {
var dateBox = self.dateBox;
var el = e.target;
if(el.nodeName == 'SPAN'&&el.getAttribute('_value')) {
var l = dateBox.getElementsByTagName('span');
for( i = 0, j = l.length; i < j; i++) {
l[i].removeAttribute('class');
}
el.setAttribute('class', 'current');
var current=el.getAttribute('_value')
self.Date.setDate(current);

var d =getCurrentDate(self.Date)
//console.log(d)
self.select(d);
}
}
//双击
calendar.prototype.dbclick = function(e) {
console.log(2)
}

calendar.prototype.select=function(date){

}


//返回给定时间数组
function getCurrentDate(d){
var date = d;
var y = date.getFullYear();
var m = date.getUTCMonth();
var d = date.getDate();
var w = date.getDay();
var s = date.getMilliseconds();
var i = date.getMinutes();
var h = date.getHours();
var newDate = {
y : y,
m : m,
d : d,
h : h,
i : i,
s : s
};
return newDate;
}


/**
*@param {object} unit
* format {y:'',m:'',d:'',h:'',i:'',s:''}
*/
calendar.prototype.getDate = function(unit) {
var newDate = {}
// var date = new Date();
var date = self.Date;
var y = date.getFullYear();
var m = date.getUTCMonth();
var d = date.getDate();
var w = date.getDay();
var s = date.getMilliseconds();
var i = date.getMinutes();
var h = date.getHours();
var newDate = {
y : 0,
m : 0,
d : 0,
h : 0,
i : 0,
s : 0
};

newDate.s = s + unit.s;
if(newDate.s > 60) {
newDate.s = newDate.s % 60;
unit.i += 1;
}
newDate.i = i + unit.i;
if(newDate.i > 60) {
newDate.i = newDate.i % 60;
unit.h += 1;
}
newDate.h = h + unit.h;
if(newDate.h > 23) {
newDate.h = newDate.h % 23;
unit.d += 1;
}

newDate.d = d + unit.d;

if(in_array(m + 1, self.bigM)) {
if(newDate.d > 31) {
newDate.d = newDate.d % 31;
unit.m += 1;
}
} else if(m == 1) {
//2月
//润年
if(y % 4 == 0) {
if(newDate.d > 29) {
newDate.d = newDate.d % 29;
unit.m += 1;
}

} else {
if(newDate.d > 28) {
newDate.d = newDate.d % 28;
unit.m += 1;
}

}
} else {
if(newDate.d > 30) {
newDate.d = newDate.d % 30;
unit.m += 1;
}

}
newDate.m = m + unit.m;
if(newDate.m + 1 > 12) {
newDate.m = newDate.m % 12;
unit.y += 1;
} else if(newDate.m == -1) {
newDate.m = 11;
unit.y -= 1;
}
newDate.y = y + unit.y;
newDate.mDate = getMothDate(newDate.y, newDate.m);
return newDate;
}
window.calendar = calendar;
})()

//判断值是否在数组里面
function in_array(value, array) {
for(var i = 0, j = array.length; i < j; i++) {
if(value == array[i]) {
return true;
}
}
return false;
}

//判断月份天数
function getMothDate(y, m) {
var d = 0;
if(in_array(m + 1, self.bigM)) {
d = 31
} else if(m == 1) {
//2月
//润年
if(y % 4 == 0) {
d = 29
} else {
d = 28
}
} else {
d = 30;
}
return d;
}

window.onload = function() {

var cal = new calendar("wrap_calendar");

//调用事件
cal.select=function(date){
console.log(date)
}
}

</script>
<div class="wrap" id="wrap_calendar"></div>
</body>
</html>