原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

时间：2022-08-30 16:46:06

原文出处

(这是我从互联网上搜来的，感觉能满足各方面的需求。个人感觉挺不错的，所以后期修改了一下向大家推荐！)

效果图：

原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间</title>

<script type="text/javascript" src="js/Calendar.js"></script>

</head>

<body>

	<div style="width:420px; margin:100px auto;">

		<span>开始时间 <input name="control_date" type="text" id="control_date" size="10" maxlength="10" onClick="new Calendar().show(this);" readonly="readonly" /></span>

		<span>结束时间 <input name="control_date2" type="text" id="control_date2" size="10" maxlength="10" onClick="new Calendar().show(this);" readonly="readonly" /></span>

		<span><input name="" type="button" value="查询" onClick=""/></span>

	</div>

</body>

</html>

js代码：

/**

 * Calendar

 * @param   beginYear           1990

 * @param   endYear             2010

 * @param   language            0(zh_cn)|1(en_us)|2(en_en)|3(zh_tw)

 * @param   patternDelimiter    "-"

 * @param   date2StringPattern  "yyyy-MM-dd"

 * @param   string2DatePattern  "ymd"

 * @version 1.0 build 2006-04-01

 * @version 1.1 build 2006-12-17

 * @author  KimSoft (jinqinghua [at] gmail.com)

 * NOTE!    you can use it free, but keep the copyright please

 * IMPORTANT:you must include this script file inner html body elment

 */

function Calendar(beginYear, endYear, language, patternDelimiter, date2StringPattern, string2DatePattern) {

	this.beginYear = beginYear || 2010;

	this.endYear   = endYear   || 2030;

	this.language  = language  || 0;

	this.patternDelimiter = patternDelimiter     || "-";

	this.date2StringPattern = date2StringPattern || Calendar.language["date2StringPattern"][this.language].replace(/\-/g, this.patternDelimiter);

	this.string2DatePattern = string2DatePattern || Calendar.language["string2DatePattern"][this.language];

	this.dateControl = null;

	this.panel  = this.getElementById("__calendarPanel");

	this.iframe = window.frames["__calendarIframe"];

	this.form   = null;

	this.date = new Date();

	this.year = this.date.getFullYear();

	this.month = this.date.getMonth();

	this.colors = {"bg_cur_day":"#00CC33","bg_over":"#EFEFEF","bg_out":"#FFCC00"}

};

Calendar.language = {

	"year"   : ["\u5e74", "", "", "\u5e74"],

	"months" : [

				["\u4e00\u6708","\u4e8c\u6708","\u4e09\u6708","\u56db\u6708","\u4e94\u6708","\u516d\u6708","\u4e03\u6708","\u516b\u6708","\u4e5d\u6708","\u5341\u6708","\u5341\u4e00\u6708","\u5341\u4e8c\u6708"],

				["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"],

				["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"],

				["\u4e00\u6708","\u4e8c\u6708","\u4e09\u6708","\u56db\u6708","\u4e94\u6708","\u516d\u6708","\u4e03\u6708","\u516b\u6708","\u4e5d\u6708","\u5341\u6708","\u5341\u4e00\u6708","\u5341\u4e8c\u6708"]

				],

	"weeks"  : [["\u65e5","\u4e00","\u4e8c","\u4e09","\u56db","\u4e94","\u516d"],

				["Sun","Mon","Tur","Wed","Thu","Fri","Sat"],

				["Sun","Mon","Tur","Wed","Thu","Fri","Sat"],

				["\u65e5","\u4e00","\u4e8c","\u4e09","\u56db","\u4e94","\u516d"]

		],

	"clear"  : ["\u6e05\u7a7a", "Clear", "Clear", "\u6e05\u7a7a"],

	"today"  : ["\u4eca\u5929", "Today", "Today", "\u4eca\u5929"],

	"close"  : ["\u5173\u95ed", "Close", "Close", "\u95dc\u9589"],

	"date2StringPattern" : ["yyyy-MM-dd", "yyyy-MM-dd", "yyyy-MM-dd", "yyyy-MM-dd"],

	"string2DatePattern" : ["ymd","ymd", "ymd", "ymd"]

};

Calendar.prototype.draw = function() {

	calendar = this;

	var _cs = [];

	_cs[_cs.length] = '<form id="__calendarForm" name="__calendarForm" method="post">';

	_cs[_cs.length] = '<table id="__calendarTable" width="100%" border="0" cellpadding="3" cellspacing="1" align="center">';

	_cs[_cs.length] = ' <tr>';

	_cs[_cs.length] = '  <th><input class="l" name="goPrevMonthButton" type="button" id="goPrevMonthButton" value="<" \/><\/th>';

	_cs[_cs.length] = '  <th colspan="5"><select class="year" name="yearSelect" id="yearSelect"><\/select><select class="month" name="monthSelect" id="monthSelect"><\/select><\/th>';

	_cs[_cs.length] = '  <th><input class="r" name="goNextMonthButton" type="button" id="goNextMonthButton" value=">" \/><\/th>';

	_cs[_cs.length] = ' <\/tr>';

	_cs[_cs.length] = ' <tr>';

	for(var i = 0; i < 7; i++) {

		_cs[_cs.length] = '<th class="theader">';

		_cs[_cs.length] = Calendar.language["weeks"][this.language][i];

		_cs[_cs.length] = '<\/th>';

	}

	_cs[_cs.length] = '<\/tr>';

	for(var i = 0; i < 6; i++){

		_cs[_cs.length] = '<tr align="center">';

		for(var j = 0; j < 7; j++) {

			switch (j) {

				case 0: _cs[_cs.length] = '<td class="sun"> <\/td>'; break;

				case 6: _cs[_cs.length] = '<td class="sat"> <\/td>'; break;

				default:_cs[_cs.length] = '<td class="normal"> <\/td>'; break;

			}

		}

		_cs[_cs.length] = '<\/tr>';

	}

	_cs[_cs.length] = ' <tr>';

	_cs[_cs.length] = '  <th colspan="2"><input type="button" class="b" name="clearButton" id="clearButton" \/><\/th>';

	_cs[_cs.length] = '  <th colspan="3"><input type="button" class="b" name="selectTodayButton" id="selectTodayButton" \/><\/th>';

	_cs[_cs.length] = '  <th colspan="2"><input type="button" class="b" name="closeButton" id="closeButton" \/><\/th>';

	_cs[_cs.length] = ' <\/tr>';

	_cs[_cs.length] = '<\/table>';

	_cs[_cs.length] = '<\/form>';

	this.iframe.document.body.innerHTML = _cs.join("");

	this.form = this.iframe.document.forms["__calendarForm"];

	this.form.clearButton.value = Calendar.language["clear"][this.language];

	this.form.selectTodayButton.value = Calendar.language["today"][this.language];

	this.form.closeButton.value = Calendar.language["close"][this.language];

	this.form.goPrevMonthButton.onclick = function () {calendar.goPrevMonth(this);}

	this.form.goNextMonthButton.onclick = function () {calendar.goNextMonth(this);}

	this.form.yearSelect.onchange = function () {calendar.update(this);}

	this.form.monthSelect.onchange = function () {calendar.update(this);}

	this.form.clearButton.onclick = function () {calendar.dateControl.value = "";calendar.hide();}

	this.form.closeButton.onclick = function () {calendar.hide();}

	this.form.selectTodayButton.onclick = function () {

		var today = new Date();

		calendar.date = today;

		calendar.year = today.getFullYear();

		calendar.month = today.getMonth();

		calendar.dateControl.value = today.format(calendar.date2StringPattern);

		calendar.hide();

	}

};

Calendar.prototype.bindYear = function() {

	var ys = this.form.yearSelect;

	ys.length = 0;

	for (var i = this.beginYear; i <= this.endYear; i++){

		ys.options[ys.length] = new Option(i + Calendar.language["year"][this.language], i);

	}

};

Calendar.prototype.bindMonth = function() {

	var ms = this.form.monthSelect;

	ms.length = 0;

	for (var i = 0; i < 12; i++){

		ms.options[ms.length] = new Option(Calendar.language["months"][this.language][i], i);

	}

};

Calendar.prototype.goPrevMonth = function(e){

	if (this.year == this.beginYear && this.month == 0){return;}

	this.month--;

	if (this.month == -1) {

		this.year--;

		this.month = 11;

	}

	this.date = new Date(this.year, this.month, 1);

	this.changeSelect();

	this.bindData();

};

Calendar.prototype.goNextMonth = function(e){

	if (this.year == this.endYear && this.month == 11){return;}

	this.month++;

	if (this.month == 12) {

		this.year++;

		this.month = 0;

	}

	this.date = new Date(this.year, this.month, 1);

	this.changeSelect();

	this.bindData();

};

Calendar.prototype.changeSelect = function() {

	var ys = this.form.yearSelect;

	var ms = this.form.monthSelect;

	for (var i= 0; i < ys.length; i++){

		if (ys.options[i].value == this.date.getFullYear()){

			ys[i].selected = true;

			break;

		}

	}

	for (var i= 0; i < ms.length; i++){

		if (ms.options[i].value == this.date.getMonth()){

			ms[i].selected = true;

			break;

		}

	}

};

Calendar.prototype.update = function (e){

	this.year  = e.form.yearSelect.options[e.form.yearSelect.selectedIndex].value;

	this.month = e.form.monthSelect.options[e.form.monthSelect.selectedIndex].value;

	this.date = new Date(this.year, this.month, 1);

	this.changeSelect();

	this.bindData();

};

Calendar.prototype.bindData = function () {

	var calendar = this;

	var dateArray = this.getMonthViewDateArray(this.date.getFullYear(), this.date.getMonth());

	var tds = this.getElementsByTagName("td", this.getElementById("__calendarTable", this.iframe.document));

	for(var i = 0; i < tds.length; i++) {

  		tds[i].style.backgroundColor = calendar.colors["bg_over"];

		tds[i].onclick = null;

		tds[i].onmouseover = null;

		tds[i].onmouseout = null;

		tds[i].innerHTML = dateArray[i] || " ";

		if (i > dateArray.length - 1) continue;

		if (dateArray[i]){

			tds[i].onclick = function () {

				if (calendar.dateControl){

					calendar.dateControl.value = new Date(calendar.date.getFullYear(),

														calendar.date.getMonth(),

														this.innerHTML).format(calendar.date2StringPattern);

				}

				calendar.hide();

			}

			tds[i].onmouseover = function () {this.style.backgroundColor = calendar.colors["bg_out"];}

			tds[i].onmouseout  = function () {this.style.backgroundColor = calendar.colors["bg_over"];}

			var today = new Date();

			if (today.getFullYear() == calendar.date.getFullYear()) {

				if (today.getMonth() == calendar.date.getMonth()) {

					if (today.getDate() == dateArray[i]) {

						tds[i].style.backgroundColor = calendar.colors["bg_cur_day"];

						tds[i].onmouseover = function () {this.style.backgroundColor = calendar.colors["bg_out"];}

						tds[i].onmouseout  = function () {this.style.backgroundColor = calendar.colors["bg_cur_day"];}

					}

				}

			}

		}//end if

	}//end for

};

Calendar.prototype.getMonthViewDateArray = function (y, m) {

	var dateArray = new Array(42);

	var dayOfFirstDate = new Date(y, m, 1).getDay();

	var dateCountOfMonth = new Date(y, m + 1, 0).getDate();

	for (var i = 0; i < dateCountOfMonth; i++) {

		dateArray[i + dayOfFirstDate] = i + 1;

	}

	return dateArray;

};

Calendar.prototype.show = function (dateControl, popuControl) {

	if (this.panel.style.visibility == "visible") {

		this.panel.style.visibility = "hidden";

	}

	if (!dateControl){

		throw new Error("arguments[0] is necessary!")

	}

	this.dateControl = dateControl;

	popuControl = popuControl || dateControl;

	this.draw();

	this.bindYear();

	this.bindMonth();

	if (dateControl.value.length > 0){

		this.date  = new Date(dateControl.value.toDate(this.patternDelimiter, this.string2DatePattern));

		this.year  = this.date.getFullYear();

		this.month = this.date.getMonth();

	}

	this.changeSelect();

	this.bindData();

	var xy = this.getAbsPoint(popuControl);

	this.panel.style.left = xy.x + "px";

	this.panel.style.top = (xy.y + dateControl.offsetHeight) + "px";

	this.panel.style.visibility = "visible";

};

Calendar.prototype.hide = function() {

	this.panel.style.visibility = "hidden";

};

Calendar.prototype.getElementById = function(id, object){

	object = object || document;

	return document.getElementById ? object.getElementById(id) : document.all(id);

};

Calendar.prototype.getElementsByTagName = function(tagName, object){

	object = object || document;

	return document.getElementsByTagName ? object.getElementsByTagName(tagName) : document.all.tags(tagName);

};

Calendar.prototype.getAbsPoint = function (e){

	var x = e.offsetLeft;

	var y = e.offsetTop;

	while(e = e.offsetParent){

		x += e.offsetLeft;

		y += e.offsetTop;

	}

	return {"x": x, "y": y};

};

/**

 * @param   d the delimiter

 * @param   p the pattern of your date

 * @author  meizz

 * @author  kimsoft add w+ pattern

 */

Date.prototype.format = function(style) {

	var o = {

		"M+" : this.getMonth() + 1, //month

		"d+" : this.getDate(),      //day

		"h+" : this.getHours(),     //hour

		"m+" : this.getMinutes(),   //minute

		"s+" : this.getSeconds(),   //second

		"w+" : "\u65e5\u4e00\u4e8c\u4e09\u56db\u4e94\u516d".charAt(this.getDay()),   //week

		"q+" : Math.floor((this.getMonth() + 3) / 3),  //quarter

		"S"  : this.getMilliseconds() //millisecond

	}

	if (/(y+)/.test(style)) {

		style = style.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));

	}

	for(var k in o){

		if (new RegExp("("+ k +")").test(style)){

			style = style.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));

		}

	}

	return style;

};

/**

 * @param d the delimiter

 * @param p the pattern of your date

 * @rebuilder kimsoft

 * @version build 2006.12.15

 */

String.prototype.toDate = function(delimiter, pattern) {

	delimiter = delimiter || "-";

	pattern = pattern || "ymd";

	var a = this.split(delimiter);

	var y = parseInt(a[pattern.indexOf("y")], 10);

	//remember to change this next century ;)

	if(y.toString().length <= 2) y += 2000;

	if(isNaN(y)) y = new Date().getFullYear();

	var m = parseInt(a[pattern.indexOf("m")], 10) - 1;

	var d = parseInt(a[pattern.indexOf("d")], 10);

	if(isNaN(d)) d = 1;

	return new Date(y, m, d);

};

document.writeln('<div id="__calendarPanel" style="position:absolute;visibility:hidden;z-index:9999;background-color:#FFFFFF;border:1px solid #666666;width:200px;height:216px;">');

document.writeln('<iframe name="__calendarIframe" id="__calendarIframe" width="100%" height="100%" scrolling="no" frameborder="0" style="margin:0px;"><\/iframe>');

var __ci = window.frames['__calendarIframe'];

__ci.document.writeln('<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd">');

__ci.document.writeln('<html xmlns="http:\/\/www.w3.org\/1999\/xhtml">');

__ci.document.writeln('<head>');

__ci.document.writeln('<meta http-equiv="Content-Type" content="text\/html; charset=utf-8" \/>');

__ci.document.writeln('<title>Web Calendar(UTF-8) Written By KimSoft<\/title>');

__ci.document.writeln('<style type="text\/css">');

__ci.document.writeln('<!--');

__ci.document.writeln('body {font-size:12px;margin:0px;text-align:center;}');

__ci.document.writeln('form {margin:0px;}');

__ci.document.writeln('select {font-size:12px;background-color:#EFEFEF;}');

__ci.document.writeln('table {border:0px solid #CCCCCC;background-color:#FFFFFF}');

__ci.document.writeln('th {font-size:12px;font-weight:normal;background-color:#FFFFFF;}');

__ci.document.writeln('th.theader {font-weight:normal;background-color:#666666;color:#FFFFFF;width:24px;}');

__ci.document.writeln('select.year {width:64px;}');

__ci.document.writeln('select.month {width:60px;}');

__ci.document.writeln('td {font-size:12px;text-align:center;}');

__ci.document.writeln('td.sat {color:#0000FF;background-color:#EFEFEF;}');

__ci.document.writeln('td.sun {color:#FF0000;background-color:#EFEFEF;}');

__ci.document.writeln('td.normal {background-color:#EFEFEF;}');

__ci.document.writeln('input.l {border: 1px solid #CCCCCC;background-color:#EFEFEF;width:20px;height:20px;}');

__ci.document.writeln('input.r {border: 1px solid #CCCCCC;background-color:#EFEFEF;width:20px;height:20px;}');

__ci.document.writeln('input.b {border: 1px solid #CCCCCC;background-color:#EFEFEF;width:100%;height:20px;}');

__ci.document.writeln('-->');

__ci.document.writeln('<\/style>');

__ci.document.writeln('<\/head>');

__ci.document.writeln('<body>');

__ci.document.writeln('<\/body>');

__ci.document.writeln('<\/html>');

__ci.document.close();

document.writeln('<\/div>');

var calendar = new Calendar();

//-->

原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间的更多相关文章

  1. 点击Input框弹出日期选项

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 原生js及H5模拟鼠标点击拖拽

    一.原生js 1.拖拽的流程动作 鼠标按下 触发onmousedown事件 鼠标移动 触发onmousemove事件 鼠标松开 触发onmouseup事件 2.注意事项: 要防止div移出可视框,要限 ...

  3. &lbrack;JS&rsqb; 鼠标点击文本框清空默认值&comma;离开文本框恢复默认值

    在使用文本框的时候,若设定了初始值,选择文本框进行输入的时候要将本来的内容进行删除,会显得非常麻烦 可以在文本框属性定义触发onfocus和onblur两个事件时对应的js功能 下面以asp.net代 ...

  4. JS轻松实现单击文本框弹出选择日期

    我的开发工具是vs2005,你们可选择自己合适的开发工具 首先创建个文本框<input id="txFDate" name="txFDate" type= ...

  5. Extjs4&period;2如何实现鼠标点击统计图时弹出窗口来展示统计的具体列表信息

    var pageSize = 20;//初始化每页数据条数 var winTitle = '';//初始化窗口标题 /** *点击统计图时,弹出一个窗口,显示统计的详情列表信息, *该方法为项目中所有 ...

  6. js 鼠标点击文本框 提示文字消失

    onfocus="if(this.value==defaultValue) {this.value='';}" onblur="if(!value) {value=def ...

  7. ionic3 点击输入 框弹出白色遮罩 并把 界面顶到上面

    这个蛋疼 问题 ,在android 上面遇到这种情况 ,键盘弹出的时候 总有一个白色的遮罩在后面出现,网上查了很久都没发现原因. 偶然发现一个方法 ,试下了下 问题解决了. 代码如下: IonicMo ...

  8. 原生Ajax GET&plus;POST请求无刷新实现文本框用户名是否被注册

    实现Ajax需要使用一个核心对象XMLHttpRequest XMLHttpRequest对象可以在不向服务器提交整个页面的情况下,实现局部更新网页.当页面全部加载完毕后,客户端通过该对象向服务器请求 ...

  9. 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选

    原生Js封装的弹出框-弹出窗口-页面居中-多状态可选   实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...

随机推荐

  1. 学习笔记——git

    恩没错,又是个新东西 使用Git提交文件到版本库有两步: 第一步:是使用 git add 把文件添加进去,实际上就是把文件添加到暂存区. 第二步:使用git commit提交更改,实际上就是把暂存区的 ...

  2. Maximum Depth of Binary Tree

    二叉树最大深度的递归实现. /** * Definition for a binary tree node. * public class TreeNode { * int val; * TreeNo ...

  3. Java lamda Stream

    Intermediate:一个流可以后面跟随零个或多个 intermediate 操作.其目的主要是打开流,做出某种程度的数据映射/过滤,然后返回一个新的流,交给下一个操作使用.这类操作都是惰性化的( ...

  4. 深入理解java虚拟机（4）---类加载机制

    类加载的过程包括: 加载class到内存,数据校验,转换和解析,初始化,使用using和卸载unloading过程. 除了解析阶段,其他过程的顺序是固定的.解析可以放在初始化之后,目的就是为了支持动态 ...

  5. DOM 之 document 查找元素方法

    DOM 之 document 查找元素方法 getElementById("idName"); // 始终取得第一个 idName 的元素 getElementsByTagName ...

  6. Com进程通信（有详细步骤）

    http://www.cnblogs.com/FKdelphi/p/5772950.html

  7. android报错 Expected BEGIN&lowbar;OBJECT but was STRING at line 1 column 39 path &dollar;

    我在使用retrofit和Gson配合时,出现了这个问题,疑惑中乱七八糟瞎搞了一个下午没有解决.期间怀疑Gson解析不能使用泛型(因为我的解析使用了泛型),后来又觉得可能是我的关键字正好是解析器的某个 ...

  8. linux中查找（find、locate、which、whereis、grep）命令汇总、帮助命令（man、whatis、apropos、info、help）汇总

    (一)find命令详解 find:功能:文件搜索: 语法:find[搜索范围][匹配条件]:  只要匹配条件完全符合才可以被显示,使用通配符*匹配条件*则可以显示匹配条件的所有目录,问号?匹配单个字符 ...

  9. &period;net4&period;0切换2&period;0时，SplitContainer”的对象强制转换为类型

    问 题:将dotnet framework 4.0 切换到2.0时,编译没有问题,在运行时出现如下错误:System.InvalidCastException: 无法将类型为“System.Windo ...

  10. &lbrack;原&rsqb;&lbrack;osg&rsqb;&lbrack;osgEarth&rsqb;关于在OE中使用物理引擎的调研

    关于物理引擎旋转的一些整理 参考文档 http://blog.wolfire.com/2010/03/Comparing-ODE-and-Bullet 介绍ODE和bullet的利弊 http://s ...

相关文章