javascript实例学习之六—自定义日历控件

时间:2023-02-26 09:19:20

基于之前上篇博客轻量级jquery,tool.js和base.js。自定义开发的base_datePicker插件,效果类似于jquery_ui的datePicker插件

//基于Base.js以及tool.js做的日历插件
$().extend('datePicker', function() {
//生成日历插件
var $yearSpan;
var $monthSpan;
var tds;
var $prevBtn;
var $nextBtn;
var $lastTr;
var $datePicker;
for (var i = , len = this.elements.length; i < len; i++) {
var curElem = this.elements[i];
$(curElem).focus(function() {
$this = $(this);
if (!this.datePicker) {
var top = $this.top() + $this.height();
var left = $this.left();
this.datePicker = createDatePicker(top, left);
$(this.datePicker).insertAfter(this);
$datePicker = $(this.datePicker);
$yearSpan = $('.myDatePicker .year');
$monthSpan = $('.myDatePicker .month');
$prevBtn = $('.myDatePicker .title .l');
$nextBtn = $('.myDatePicker .title .r');
tds = $('.myDatePicker').getElem().getElementsByTagName('td');
//为上一月下一月的按钮添加点击事件
addEventForBtn();
//为表格的单元格添加点击事件
addEventForTds(curElem);
//在页面除日期输入框的任何地方点击,日历控件消失
addEventForDocument(curElem);
}
$datePicker.show();
var nowDate = new Date();
refreshDate(nowDate.getFullYear(), nowDate.getMonth() + );
//将当前的日期标注为红色
showColor(); });
$(curElem).blur(function() {
if (this.datePicker) {
// $(this.datePicker).hide();
}
});
} function createDatePicker(top, left) {
var oDiv = document.createElement('div');
oDiv.style.position = 'absolute';
oDiv.style.top = top;
oDiv.style.left = left;
oDiv.className = 'myDatePicker';
var titleDiv = document.createElement('div');
titleDiv.className = 'title';
titleDiv.innerHTML = '<span class="l"><</span> <span class = "year"></span>年<span class="month"></span > 月 <span class = "r" >> </span>';
oDiv.appendChild(titleDiv);
var dateTable = document.createElement('table');
//生成表头的星期
var dayArr = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
var thead = document.createElement('thead');
thead.insertRow();
for (var i = , len = dayArr.length; i < len; i++) {
var th = document.createElement('th');
th.innerHTML = dayArr[i];
if (i == || i == ) {
th.className = 'red';
}
thead.rows[].appendChild(th);
}
oDiv.appendChild(thead);
//生成表格主体,6行七列
var tbody = document.createElement('tbody');
for (var i = ; i < ; i++) {
tbody.insertRow(i);
for (j = ; j < ; j++) {
tbody.rows[i].insertCell(j);
}
}
oDiv.appendChild(tbody);
//刷新数据 return oDiv;
} function isLeapYear(year) {
if (year % == ) {
return true;
}
if (year % == && year % != ) {
return true;
}
return false;
} function getDayNum(year, month) {
var dayNum = ;
if (month == || month == || month == || month == || month == || month == || month == ) {
dayNum = ;
} else
if (month == && isLeapYear(year)) {
dayNum = ;
} else if (month == ) {
dayNum = ;
}
return dayNum;
}
//根据年份和月份更新日历
function refreshDate(year, month) {
$yearSpan.html(year);
$monthSpan.html(month);
//生成日期数据
var curDate = new Date();
curDate.setFullYear(year);
curDate.setMonth(month - );
curDate.setDate();
//当前的日历数据
//getDay():0代表周日,1代表周一,...以此类推
var xingqi = curDate.getDay();
var index = xingqi - ;
if (xingqi == ) {
index = ;
}
var dayNum = getDayNum(year, month);
//首先将所有的td清空
for (var i = ; i < tds.length; i++) {
tds[i].style.display = '';
tds[i].className = '';
tds[i].innerHTML = '';
} //需要知道当月的天数
var ri = ;
for (var i = index; i < index + dayNum; i++) {
tds[i].innerHTML = ri;
ri++;
}
//如果最后以行没有显示,则隐藏该行
var hasContent = false;
for (var len = tds.length - , i = len; i > len - ; i--) {
if (tds[i].innerHTML) {
hasContent = true;
break;
}
}
if (!hasContent) {
for (var len = tds.length - , i = len; i > len - ; i--) {
tds[i].style.display = 'none';
}
}
}
//将当前的日期标注为红色
function showColor() {
var curYear = $yearSpan.html();
var curMonth = $monthSpan.html();
var nowDate = new Date();
if (!(nowDate.getFullYear() == curYear && nowDate.getMonth() == (curMonth - ))) {
return;
}
for (var i = ; i < tds.length; i++) {
if (tds[i].innerHTML == nowDate.getDate()) {
tds[i].className = 'red';
return;
}
}
}
//为向左向右的按钮添加点击事件
function addEventForBtn() {
$prevBtn.click(function() {
var showYear = parseInt($yearSpan.html());
var showMonth = parseInt($monthSpan.html());
var prevMonth = showMonth - ;
var prevYear = showYear;
if (showMonth == ) {
prevMonth = ;
prevYear = showYear - ;
}
refreshDate(prevYear, prevMonth);
showColor();
});
$nextBtn.click(function() {
var showYear = parseInt($yearSpan.html());
var showMonth = parseInt($monthSpan.html());
var nextYear = showYear;
var nextMonth = showMonth + ;
if (showMonth == ) {
nextMonth = ;
nextYear = showYear + ;
}
refreshDate(nextYear, nextMonth);
showColor();
});
} function addEventForTds(curElem) {
for (var i = ; i < tds.length; i++) {
$(tds[i]).click(function() {
if (this.innerHTML) {
var showYear = $yearSpan.html();
var showMonth = $monthSpan.html();
var showDate = this.innerHTML;
curElem.value = showYear + '-' + showMonth + '-' + showDate;
$datePicker.hide();
}
});
}
} function addEventForDocument(curElem) {
$(document).click(function(e) {
if(e.target!=curElem){
if ($datePicker && $datePicker.isVisible()) {
$datePicker.hide();
}
} }); }
});

依赖的css文件,myDatePicker.css

.myDatePicker{
width:260px;
margin-top:5px;
}
.myDatePicker th,
td {
padding:5px;
border: 1px solid #ccc;
text-align: center;
vertical-align: middle;
font-size:10px; }
.myDatePicker td{
cursor:pointer;
} .myDatePicker .title {
background: #;
height: 30px;
line-height: 30px;
color: #fff;
padding: 10px;
text-align: center;
overflow: hidden;
font-size:14px;
letter-spacing: 1px;
font-weight: ;
}
.myDatePicker table{
border-collapse:collapse;
border-spacing: ; }
.myDatePicker .l{
float:left;
cursor:pointer;
}
.myDatePicker .r{
float:right;
cursor: pointer;
}
.myDatePicker .red{
color:red;
}
.myDatePicker .blue{
color:blue;
}

用法示例

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>测试页面</title>
<link rel="stylesheet" href="./usualEffects/css/myDatePicker.css">
</head> <body>
<input type="text" id="myDatePicker">
<!--
<div class="myDatePicker">
<div class="title">
<span class="l"><</span>
<span class="c"><span class="year"></span>年<span class="month"></span>月</span>
<span class="r">></span>
</div>
<table>
<thead>
<tr>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<th class="red">周六</th>
<th class="red">周日</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
-->
<script src="./commonJs/tool.js"></script>
<script src="./commonJs/base.js"></script>
<script src="./commonJs/base_datePicker.js"></script>
<script>
$('#myDatePicker').datePicker();
</script>
</body> </html>

自定义日历控件使用方法示例