平民王子
- 浏览: 286901 次
- 性别:
- 来自: 深圳
-
文章分类
最新评论
-
cheetah_ysc：
不错不错，我喜欢！
Java固定时间间隔执行 -
voyage_mh：
阿选百度竟然一下可以吧你百度出来
使用DWR注解Annotation
js代码
function Calendar(beginYear, endYear, language, patternDelimiter, date2StringPattern, string2DatePattern) {
this.beginYear = beginYear || 1980;
this.endYear = endYear || 2020;
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};
};
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;
};
String.prototype.toDate = function(delimiter, pattern) {
delimiter = delimiter || "-";
pattern = pattern || "ymd";
var a = this.split(delimiter);
var y = parseInt(a[pattern.indexOf("y")]);
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 #aaaaaa;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:#aaaaaa;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();
jsp代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>日历</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="calendar1.js"></script>
</head>
<body>
<input type="text" onclick="new Calendar().show(this);" />
</body>
</html>
效果
- 大小: 18.3 KB
分享到：
发表评论
相关推荐
7. **兼容性**：考虑到浏览器的多样性，编写JavaScript日历控件时需要关注跨浏览器的兼容性问题，确保在不同的浏览器（如Chrome、Firefox、Safari、Edge和IE）上都能正常工作。 在提供的文件名中，"calendar.html"...
My97 DatePicker 是一个非常流行的JavaScript日历插件，它功能强大，自定义选项丰富，支持多种语言，并且在各种浏览器上都有良好的兼容性。本文将详细介绍My97 DatePicker 的使用方法及其核心特性。 首先，我们来看...
JavaScript（JS）日历控件是网页开发中常用的一种组件，用于展示日期选择功能，通常在表单中作为输入辅助工具出现。它们可以提供用户友好的界面，方便用户选择日期，而无需手动输入。以下是对JS日历控件的一些详细...
"JS日历选择器控件.zip" 提供的是一款基于JavaScript实现的日历选择器，它允许用户在输入日期时通过点击文本框来弹出一个日历视图，方便用户选择日期。这样的功能常见于各种表单、预订系统或时间安排应用中，提高了...
总之，`jQuery Calendar.js`是一款实用的日历插件，适用于需要日期选择功能的网页应用。它的节日功能使得在处理日期相关事务时更加直观和有趣。通过简单的配置和调用，开发者可以轻松地将这款日历控件整合到自己的...
js日历控件日历插件 如何使用已写在js文本里,欢迎下载!
layDate是一款由layui团队开发的高效、轻量且功能丰富的原生JavaScript日历插件，它提供了多种日历选择器样式，适用于各种网页场景。在这款控件中，开发者可以轻松实现日期选择、日期时间选择、年月选择、时间选择等...
JS日历DIV控件是一种使用JavaScript实现的轻量级日历组件，它通过在页面上动态创建一个可浮动的DIV元素来展示日历，用户可以选择日期并将其值返回到页面上的特定输入元素。 **1. JS基础知识** JavaScript（简称JS...
本文将深入探讨“js日历控件集合”这一主题，旨在为你提供多种js日历插件的选择和使用方法。 1. **基础概念** 日历控件是网页应用中的一种组件，它以日历的形式呈现日期，用户可以通过点击或滑动来选择特定日期。...
本文将深入探讨“一个简单实用的JS/JQuery日历选择控件”的知识点，结合给出的标签“源码”和“工具”，我们可以推断这是一个关于自定义日历插件的教程或示例。 首先，日历选择控件是网页应用中常见的一种组件，...
原生JavaScript日历选择器插件是一种无需依赖任何外部库，仅使用JavaScript、CSS和HTML构建的日期选择工具。这种插件在网页开发中非常实用，可以为用户提供一个直观、友好的日期输入界面，尤其适用于表单填写或者...
【标题】"js日历控件自主选择颜色" 涉及的核心技术是JavaScript日历插件的开发，尤其强调用户可以根据个人喜好自定义颜色。这样的控件在网页设计中非常常见，主要用于处理与日期相关的交互，如日期选择、预约系统、...
3款简洁的JS日历插件，实现网页上的JavaScript日历选择功能，内含有详细的调用说明，上手容易，附带有文档。calendar1调用方法：引入script src="js/calendarDateInput.js" 在calendardateinput.js修改图片的路径。
总之，JavaScript日历控件是一个结合了前端技术与用户体验设计的组件，通过JavaScript的动态特性，我们可以创建功能丰富、用户友好的日期选择工具。在实际项目中，还可以考虑与其他库（如jQuery、React或Vue）集成，...
JavaScript日历控件是网页开发中常用的一种交互元素，它允许用户在网页上方便地选择日期，常用于表单输入、事件安排或者时间相关的功能。本文将深入探讨JavaScript日历控件的实现原理、常见库及其应用。 1. **基本...
"My97DatePicker"是一个知名的JavaScript日历插件，因其丰富的功能和良好的用户体验而被广泛使用。 My97DatePicker是由中国开发者杨佳97开发的，它不仅提供了基本的日期选择功能，还包含了多种高级特性，使得它成为...
这里我们将深入探讨如何优化JavaScript日历控件，特别是那些包含时分秒选择，以及支持年月日显示的组件。 1. **性能优化**：在创建日历控件时，减少DOM操作是关键。利用虚拟DOM或仅在必要时更新DOM可以显著提升性能...
总的来说，"史上最强js日历控件"可能是一个集成了各种高级特性和自定义选项的JavaScript日历组件，它可以帮助开发者快速地在网页应用中实现强大的日期选择功能。通过深入研究和理解提供的压缩包内容，开发者可以有效...
JavaScript日历控件是网页开发中常用的一种交互元素，它能帮助用户方便地选择日期，常见于表单输入、事件安排或时间相关的功能。在给定的资源中，包含了六种不同样式的JavaScript日历，这些日历可能具有不同的设计...
在JavaScript（JS）中，日历控件是一种常见的交互元素，用于用户友好地选择日期。在许多Web应用程序中，特别是那些涉及到日期输入的场景，如预订系统、日程管理等，这种控件非常实用。本篇文章将深入探讨如何创建一...