纯JS日历控件自动输入日期到TextBox、文本框当中

截图：
/调用实例
//        <div>
//                <span>交易查询：</span> <span>从
//                    <input name="control_date" type="text" id="control_date" size="10"
//                        maxlength="10" οnclick="new Calendar().show(this);" readonly="readonly" />
//                    <input type="button" name="button" id="button" value="button" οnclick="new Calendar().show(this.form.control_date);" /></span>
//                <span>至
//                    <input name="control_date2" type="text" id="control_date2" size="10"
//                        maxlength="10" οnclick="new Calendar().show(this);" readonly="readonly" />
//                    <input type="button" name="button" id="button1" value="button" οnclick="new Calendar().show(this.form.control_date2);" /></span>

// </div>

<!--
/**
* 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 || 1990;
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};
};

/**
* @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);
};

转载于:https://www.cnblogs.com/mikehhs/archive/2011/09/24/2189632.html

纯JS日历控件自动输入日期到TextBox、文本框当中相关推荐

JS日历控件集合----附效果图、源代码
在进行开发的过程中,经常需要输入时间,特别是在进行查询.统计的时候,时间限定更为重要. 尽管ASP.NET也集成了日历控件,但是其集成的代码量很大,你可以做一个测试,当你在页面使用一个日历控件时,在发 ...
JS日历控件优化(增加时分秒)
JS日历控件优化在今年7月份时候写了一篇关于 "JS日历控件" 的文章 , 当时只支持年月日的日历控件,现在优化如下: 1. 在原基础上支持 yyyy-mm- ...
JS日历控件不显示2021年问题, 不显示2021年以后的年份，怎么解决？
JS日历控件不显示2021年问题, 不显示2021年以后的年份,怎么解决? //日历 var date_start,date_end,g_object var today = new Date(); ...
windows编程标准控件的使用（按钮，文本框）
文章目录基本控件的使用标准控件的创建移动按钮获取文本框的内容自动设置文本框内容设置父窗口枚举出所有窗口测试代码基本控件的使用标准控件的创建在我们创建窗口并且在CREATE的时候创 ...
一个非常好用的JS日历控件(支持.NET)
今天把一个非常好用的日历控件和大家分享一下,在平时输入日期的时候,往往我们需要达到一个更好的用户体验效果,使用日历控件是一个最佳的选择,这个日历控件非常的美观,是基于js方式的日历控件,而且调用非常的 ...
一个适用于visual studio 2005的一个js日历控件--zhuan
最近要用到日历控件刚开始是使用梅花雨3.0不过发现了一些弹出的快慢还有定位的问题.总是有点麻烦.另外我是处于一个隐藏层内所以会有很多问题. 这个时候研究了下discuznt.net看到他们投票里面有一 ...
一个强大的js日历控件 FullCalendar 外加一堆可以直接运行的测试代码拿走不谢
资料地址 FullCalendar官网地址 FullCalendar文档 FullCalendar-v5.5.1在下地址 FullCalendar测试实例免费下载地址: https://downloa ...
calendar控件使用 extjs_ExtJs定制日历控件——自动加载更新(日历控件显示)
将定制的日历控件放到一个Panel里显示,其结构如下: , { border: true, id: 'page', animCollapse : true, width: 1050, height: ...
Unity UGUI自制日历控件带农历日期
新手小白无聊时做的一个日历控件,需要的朋友可以借鉴下,高手大神也可以指点一下. 核心代码获取某年某月有多少天 /// 获取某年某月有多少天/// </summary>/// <p ...
delphi中DateTimePicker控件同时输入日期和时间
将DateTimePicker的Format属性中加入日期格式设成 'yyyy-MM-dd HH:mm',注意大小写 , 将kind设置为dtkTime即可,可以在每次Form onShow时将Dat ...

纯JS日历控件自动输入日期到TextBox、文本框当中

纯JS日历控件自动输入日期到TextBox、文本框当中相关推荐

最新文章

热门文章