基于之前上篇博客轻量级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>

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

javascript实例学习之六—自定义日历控件的更多相关文章

  1. Android自定义日历控件(继承系统控件实现)

    Android自定义日历控件(继承系统控件实现) 主要步骤 编写布局 继承LinearLayout设置子控件 设置数据 继承TextView实现有圆圈背景的TextView 添加Attribute 添 ...

  2. IOS自定义日历控件的简单实现(附思想及过程)

    因为程序要求要插入一个日历控件,该空间的要求是从当天开始及以后的六个月内的日历,上网查资料基本上都说只要获取两个条件(当月第一天周几和本月一共有多少天)就可以实现一个简单的日历,剩下的靠自己的简单逻辑 ...

  3. android 自定义日历控件

    日历控件View: /** * 日历控件 功能:获得点选的日期区间 * */ public class CalendarView extends View implements View.OnTouc ...

  4. iOS开发之自定义日历控件

    前言 日常开发中经常会遇到日期选择,为了方便使用,简单封装了一个日历控件,在此抛砖引玉供大家参考. 效果 功能 支持单选.区间 支持默认选中日期 支持限制月份 支持过去.当前.未来模式 支持frame ...

  5. Android 一个日历控件的实现代码

    转载  2017-05-19   作者:Othershe   我要评论 本篇文章主要介绍了Android 一个日历控件的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看 ...

  6. 【转】【WebDriver】不可编辑域和日历控件域的输入 javascript

    http://blog.csdn.net/fudax/article/details/8089404 今天用到日历控件,用第一个javascript执行后页面上的日期控件后,在html中可以看到生效日 ...

  7. javascript日历控件——纯javascript版

    平时只有下班时间能code,闲来写了个纯javascript版.引用该calendar.js文件,然后给要设置成日历控件的input的id设置成calendar,该input就会变成日历控件. < ...

  8. javascript日历控件

    以前要用到日历控件都是直接从网上下载一套源码来使用,心里一直有个梗,就是想自己动手写一个日历控件,最近刚好来了兴趣,时间上也允许,于是自己摸索写了一个,功能还算完善,界面就凑合了.可能最值得说的一点就 ...

  9. 用MVC的辅助方法自定义了两个控件:“可编辑的下拉框控件”和“文本框日历控件”

    接触MVC也没多长时间,一开始学的时候绝得MVC结构比较清晰.后来入了门具体操作下来感觉MVC控件怎么这么少还不可以像ASP.net form那样拖拽.这样设计界面来,想我种以前没学过JS,Jquer ...

随机推荐

  1. switch parser.p4源码

    /* Copyright 2013-present Barefoot Networks, Inc. Licensed under the Apache License, Version 2.0 (th ...

  2. MZhong's Cover Letter

    Application for front-end developer position in Chicago Office Dear HR, I am writing to apply for th ...

  3. PHP学习(一)----变量及字符串

    PHP中的变量: 1. 定义:$符号来定义变量 2. 说明: (1)PHP弱语言,定义变量的时候不用声明类型,但是并不代表PHP没有数据类型 (2)变量名是区分大小写的,只能是数字,字母或者下划线 ( ...

  4. Git 忽略一些文件不加入版本控制

    在git中如果想忽略掉某个文件,不让这个文件提交到版本库中,可以使用修改 .gitignore 文件的方法.这个文件每一行保存了一个匹配的规则例如: # 此为注释 – 将被 Git 忽略 *.a    ...

  5. NSQ:分布式的实时消息平台

    NSQ是一个基于Go语言的分布式实时消息平台,它基于MIT开源协议发布,代码托管在GitHub,其当前最新版本是0.3.1版.NSQ可用于大规模系统中的实时消息服务,并且每天能够处理数亿级别的消息,其 ...

  6. http安全篇

    一.app与服务端交互确保来源的安全 作为一个移动互联网App,天生是需要和服务器通信的.那么,服务器如何识别客户端的身份?我们如何保证数据传输过程中的安全性?要靠两个东西:使用AppKey做身份识别 ...

  7. Java反射机制深入研究

    ava 反射是Java语言的一个很重要的特征,它使得Java具体了“动态性”.   在Java运行时环境中,对于任意一个类,能否知道这个类有哪些属性和方法?对于任意一个对象,能否调用它的任意一个方法? ...

  8. Xlib 窗口属性

    Xlib 窗口属性 转, 无法找到原作者 所有的 InputOutput 窗口都可以有零个或者多个像素的边框宽度,一个可选的背景,一个事件压制掩码(它压制来自孩子的事件传播),和一个 property ...

  9. BulletedList使用及详解

    BulletedList是一个让你轻松在页面上显示项目符号和编号格式(Bulledted List)的控件.对于ASP.NET 1.x里要动态显示Bulledted List时,要么自己利用HTML的 ...

  10. Ubuntu 更改默认apt-get源

    原文转自:http://zhoushijun.iteye.com/blog/1942475 方法: 1.修改源地址:cp /etc/apt/sources.list /etc/apt/sources. ...