Recommended JavaScript Calendar controls compatible with IE, FireFox

Source: Internet
Author: User
Tags date format object border color getdate header tagname visibility
javascript| Control | Calendar

Web Calendar control A lot of online, the function is also very powerful, but most of them do not support Firefox, their leisure wrote a, has the following characteristics:

Characteristics:

First, support Ie6,firefox

Second, support Chinese and English calendars, free to expand other languages

Third, when you encounter the Select Drop-down box, take a hidden approach

Four, using div as a calendar container, will not be blocked by the browser

Five, support date echo, if your text box is 2003-05-12, to modify this value, the calendar will automatically display to the May 2003 view

The problems that exist:

One, speed is not very fast, and implementation-related, but also not slow, after all, is a script, there is no time-consuming operation, but I always feel can improve

When you support multiple languages on the same page, to create an instance, you have created a Chinese instance by default.

var Cn_calendar = new Calendar ();

var En_calendar = new Calendar ();

Third, other questions such as the kind of netizens give me feedback.

CSDN blog can not send attachments!!! The code is given later.

Here is the PP

Chinese calendar under IE


English Calendar under IE


The Chinese calendar under FireFox

The English calendar under Firefox

Finally thanks: Meizz, this control refers to a Meizz date formatting method, I add a little change.

Give the code:

Webcalendar.js

<!--
/**
 * return date
 * @param d the delimiter
 * @param p The pattern of your date
  */
String.prototype.toDate = function (x, p) {
  if (x = = null) x = "-";
  if (p = = null) p = "Ymd";
  var a = This.split (x);
  var y = parseint (A[p.indexof ("Y")]);
 //remember To change this next century;)
  if (y.tostring (). length <= 2) y = =;
  if (isNaN (y)) y = new Date (). getFullYear ();
  var m = parseint (A[p.indexof ("M")])-1;
  var d = parseint (A[p.indexof ("D")]);
  if (isNaN (d)) d = 1;
  return new Date (Y, M, d);
}

/**
 * format Date
 * @param    d the delimiter
 * @param    p The pattern of your Date
 * @author   meizz
 */
Date.prototype.format = function (style) {
  var o = {
& nbsp;   "m+": This.getmonth () + 1,//month
    "d+": This.getdate (),    & nbsp; //day
    "h+": this.gethours (),    //hour
     "m+": This.getminutes (),  //minute
    "s+": This.getseconds (),  / Second
    "w+": "Day 123456". 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]:
        ("+ o[k]"). substr (("" + o[k]). length);
   }
 }
  return style;
};

/**
* Calendar class
* @param beginyear 1990
* @param endyear 2010
* @param lang 0 (Chinese) |1 (English) free to expand
* @param dateformatstyle "YYYY-MM-DD";
* @version 2006-04-01
* @author Kimsoft (Jinqinghua [at] gmail.com)
* @update
*/
function Calendar (beginyear, endyear, Lang, Dateformatstyle) {
This.beginyear = 1990;
This.endyear = 2010;
This.lang = 0; 0 (Chinese) | 1 (English)
This.dateformatstyle = "YYYY-MM-DD";

if (beginyear!= null && endyear!= null) {
This.beginyear = Beginyear;
This.endyear = Endyear;
}
if (lang!= null) {
This.lang = Lang
}

if (Dateformatstyle!= null) {
This.dateformatstyle = Dateformatstyle
}

This.datecontrol = null;
This.panel = This.getelementbyid ("Calendarpanel");
This.form = null;

This.date = new Date ();
This.year = This.date.getFullYear ();
This.month = This.date.getMonth ();


  this.colors = {
  "Cur_word"      : "#FFFFFF", //Date text color
  "CUR_BG"        : "#00FF00", //Date cell background color
  "Sun_word"      : "#FF0000", //Sunday text color
  "Sat_word"      : "# 0000FF ", //Saturday text color
 " td_word_light ":" #333333 ", //Cell text color
 " Td_word_dark " :" # CCCCCC ", //Cell text dark
 " Td_bg_out "    :" #EFEFEF ", //Cell background color
  Td_bg_ Over "   :" #FFCC00 ", //Cell background color
 " Tr_word "      :" FFFFFF ", //Calendar Header text color
 " TR_BG "        :" #666666 ", // Calendar Header background Color
  "Input_border"  : "#CCCCCC", //input control border color
  "INPUT_BG"       : "#EFEFEF"   //input control background color
 }

This.draw ();
This.bindyear ();
This.bindmonth ();
This.changeselect ();
This.binddata ();
}

/**
* Calendar class attributes (language packs, can be extended freely)
*/
Calendar.language = {
"Year": [["], ["]],
"Months": [["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
["FEB", "the", "MAR", "APR", "may", "June", "O", "AUG", "SEP", "OCT", "NOV", "DEC"]
],
"Weeks": ["Day", "one", "two", "three", "four", "five", "six"],
["SUN", "MON", "TUR", "WED", "THU", "FRI", "SAT"]
],
' Clear ': [[' Empty '], [' CLS ']],
"Today": [[Now]], ["Todays"]],
"Close": [[[Closed]], [closing]]
}

Calendar.prototype.draw = function () {
calendar = this;

var mvary = [];


Mvary[mvary.length] = ' &lt;form name= ' calendarform ' style= ' margin:0px; &gt; ';


mvary[mvary.length] = ' &lt;table width= "100%" border= "0" cellpadding= "0" cellspacing= "1" &gt; ";


mvary[mvary.length] = ' &lt;tr&gt; ';


mvary[mvary.length] = ' &lt;th align= "left" width= "1%" &gt;&lt;input style= "border:1px solid ' + calendar.c" olors["Input_border"] + '; Background-color: ' + calendar.colors["INPUT_BG"] + "width:16px;height:20px;" Name= " Prevmonth "type=" button "id=" Prevmonth "value=" &lt; "/&gt;&lt;/th&gt;";


Mvary[mvary.length] = ' &lt;th align= ' center "width=" 98% "nowrap=" nowrap "&gt;&lt;select name=" CalendarYear "id=" CA Lendaryear "style=" FONT-SIZE:12PX; " &gt;&lt;/select&gt;&lt;select name= "Calendarmonth" id= "Calendarmonth" style= "font-size:12px"; &gt;&lt;/select&gt;&lt;/th&gt; ';


mvary[mvary.length] = ' &lt;th align= "right" width= "1%" &gt;&lt;input style= "border:1px solid" + Calendar. colors["Input_border"] + '; Background-color: ' + calendar.colors["INPUT_BG"] + "width:16px;height:20px;" Name= " Nextmonth "type=" button "id=" Nextmonth "value=" &gt; "/&gt;&lt;/th&gt;";


mvary[mvary.length] = ' &lt;/tr&gt; ';


mvary[mvary.length] = ' &lt;/table&gt; ';


Mvary[mvary.length] = "&lt;table id=" calendartable "width=" 100% "style=" border:0px solid #CCCCCC; Background-color: #FF FFFF "border=" 0 "cellpadding=" 3 "cellspacing=" 1 "&gt;";


mvary[mvary.length] = ' &lt;tr&gt; ';


for (var i = 0; i &lt; 7; i++) {


mvary[mvary.length] = ' &lt;th style= ' font-weight:normal;background-color: ' + calendar.colors[' tr_bg '] + '; Color: ' + calendar.colors["Tr_word"] + '; " &gt; ' + calendar.language[' weeks '][this.lang][i] + ' &lt;/th&gt; ';


  }


mvary[mvary.length] = ' &lt;/tr&gt; ';


for (var i = 0; i &lt; 6;i++) {


mvary[mvary.length] = ' &lt;tr align= ' center ' &gt; ';


for (var j = 0; J &lt; 7; + +) {


if (j = = 0) {


mvary[mvary.length] = ' &lt;td style= ' cursor:default;color: ' + calendar.colors[' sun_word '] + '; ' &gt;&lt;/td&gt; ';


} else if (j = = 6) {


mvary[mvary.length] = ' &lt;td style= ' cursor:default;color: ' + calendar.colors[' sat_word '] + '; ' &gt;&lt;/td&gt; ';


} else {


mvary[mvary.length] = ' &lt;td style= ' cursor:default; &gt;&lt;/td&gt; ';


      }


    }


mvary[mvary.length] = ' &lt;/tr&gt; ';


  }


Mvary[mvary.length] = ' &lt;tr style= ' background-color: ' + calendar.colors[' input_bg '] + '; ' &gt; ';


mvary[mvary.length] = ' &lt;th colspan= ' 2 "&gt;&lt;input name=" calendarclear "type=" button "id=" CalendarClea R "value=" ' + calendar.language[' clear '][this.lang] + ' style= ' border:1px solid ' + calendar.colors[' input_border '] + '; Background-color: ' + calendar.colors["INPUT_BG"] + '; width:100%;height:20px;font-size:12px; " /&gt;&lt;/th&gt; ';


mvary[mvary.length] = ' &lt;th colspan= ' 3 "&gt;&lt;input name=" Calendartoday "type=" button "id=" CalendarToda Y "value=" ' + calendar.language[' today '][this.lang] + ' style= ' border:1px solid ' + calendar.colors[' input_border '] + '; Background-color: ' + calendar.colors["INPUT_BG"] + '; width:100%;height:20px;font-size:12px; " /&gt;&lt;/th&gt; ';


Mvary[mvary.length] = ' &lt;th colspan= "2" &gt;&lt;input name= "calendarclose" type= "button" id= "Calendarclose" Valu E= "' + calendar.language[" close "][this.lang] + '" style= "border:1px solid ' + calendar.colors[" input_border "] + '; Backgro Und-color: ' + calendar.colors["INPUT_BG"] + '; width:100%;height:20px;font-size:12px; " /&gt;&lt;/th&gt; ';


mvary[mvary.length] = ' &lt;/tr&gt; ';


mvary[mvary.length] = ' &lt;/table&gt; ';


mvary[mvary.length] = ' &lt;/form&gt; ';


This.panel.innerHTML = Mvary.join ("");


this.form = document.forms["Calendarform"];

This.form.prevMonth.onclick = function () {calendar.goprevmonth (this);}
This.form.nextMonth.onclick = function () {calendar.gonextmonth (this);}

This.form.calendarClear.onclick = function () {calendar.dateControl.value = ""; Calendar.hide ();}
This.form.calendarClose.onclick = function () {calendar.hide ();}
This.form.calendarYear.onchange = function () {calendar.update (this);}
This.form.calendarMonth.onchange = function () {calendar.update (this);}
This.form.calendarToday.onclick = function () {
var today = new Date ();
Calendar.date = Today;
Calendar.year = Today.getfullyear ();
Calendar.month = Today.getmonth ();
Calendar.changeselect ();
Calendar.binddata ();
Calendar.dateControl.value = Today.format (Calendar.dateformatstyle);
Calendar.hide ();
}

}

Year dropdown box binding data
Calendar.prototype.bindYear = function () {
var cy = this.form.calendarYear;
cy.length = 0;
for (var i = this.beginyear i <= this.endyear; i++) {
Cy.options[cy.length] = new Option (i + calendar.language["year"][this.lang], i);
}
}

Month dropdown Box binding data
Calendar.prototype.bindMonth = function () {
var cm = This.form.calendarMonth;
cm.length = 0;
for (var i = 0; i < i++) {
Cm.options[cm.length] = new Option (calendar.language["months"][this.lang][i], i);
}
}

Forward January
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 ();
}

Back month
Calendar.prototype.goNextMonth = function (e) {
if (this.year = = This.endyear && This.month = =) {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 ();
}

//Change Select selected state
Calendar.prototype.changeSelect = function () {
  var cy = this.form.calendarYear;
  var cm = This.form.calendarMonth;
  for (var i= 0; i < cy.length i++) {
    if (cy.options[i].value = = This.date.getFullYear () {
      cy[i].selected = true;
      break;
   }
 }
  for (var i= 0; i < cm.length; i++) {
    if (cm.options[i].value = = This.date.getMonth ()) { br>      cm[i].selected = true;
      break;
   }
 }
}

More New Year, month
Calendar.prototype.update = function (e) {
This.year = E.form.calendaryear.options[e.form.calendaryear.selectedindex].value;
This.month = E.form.calendarmonth.options[e.form.calendarmonth.selectedindex].value;
This.date = new Date (This.year, This.month, 1);
This.changeselect ();
This.binddata ();
}

//bound data to the Month view


Calendar.prototype.bindData = function () {


var calendar = this;


var datearray = This.getmonthviewarray (This.date.getYear (), This.date.getMonth ());


var tds = This.getelementbyid ("calendartable"). getElementsByTagName ("TD");


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


//tds[i].style.color = calendar.colors["Td_word_light"];


Tds[i].style.backgroundcolor = calendar.colors["Td_bg_out"];


Tds[i].onclick = function () {return;}


tds[i].onmouseover = function () {return;}


tds[i].onmouseout = function () {return;}


if (i &gt; Datearray.length-1) break;


tds[i].innerhtml = Datearray[i];


if (Datearray[i]!= "") {


Tds[i].onclick = function () {


if (Calendar.datecontrol!= null) {


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


calendar.date.getMonth (),


this.innerhtml). Format (Calendar.dateformatstyle);


        }


calendar.hide ();


      }


tds[i].onmouseover = function () {


This.style.backgroundColor = calendar.colors["Td_bg_over"];


      }


tds[i].onmouseout = function () {


This.style.backgroundColor = calendar.colors["Td_bg_out"];


}


if (new Date (). Format (calendar.dateformatstyle) = =


New Date (Calendar.date.getFullYear (),


calendar.date.getMonth (),


datearray[i]). Format (Calendar.dateformatstyle)) {


//tds[i].style.color = calendar.colors["Cur_word"];


Tds[i].style.backgroundcolor = calendar.colors["CUR_BG"];


tds[i].onmouseover = function () {


This.style.backgroundColor = calendar.colors["Td_bg_over"];


        }


tds[i].onmouseout = function () {


This.style.backgroundColor = calendar.colors["CUR_BG"];


        }


}//end If


    }


  }


}

Monthly view data based on year and month (array form)
Calendar.prototype.getMonthViewArray = function (Y, m) {
var mvarray = [];
var dayoffirstday = new Date (Y, M, 1). Getday ();
var daysofmonth = new Date (y, M + 1, 0). GetDate ();
for (var i = 0; i < i++) {
Mvarray[i] = "";
}
for (var i = 0; i < Daysofmonth; i++) {
Mvarray[i + Dayoffirstday] = i + 1;
}
return mvarray;
}

Extended document.getElementById (ID) multi-browser compatibility from Meizz tree source
Calendar.prototype.getElementById = function (ID) {
if (typeof (ID)!= "string" | | | id = = "") return null;
if (document.getElementById) return document.getElementById (ID);
if (document.all) return document.all (ID);
try {return eval (id); \ catch (e) {return null;}
}

Extended Object.getelementsbytagname (TagName)
Calendar.prototype.getElementsByTagName = function (object, tagName) {
if (document.getElementsByTagName) return document.getElementsByTagName (TagName);
if (document.all) return document.all.tags (TagName);
}

Get the absolute position of an HTML control
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};
}

//Show Calendar
Calendar.prototype.show = function (Datecontrol, Popcontrol) {
  if (Datecontrol = = null) {
    throw new Error ("arguments[0] is necessary")
 }
  This.datecontrol = Datecontrol;
  if (DateControl.value.length > 0) {
  this.date = new Date (dateControl.value.toDate ());
  This.year = This.date.getFullYear ();
  This.month = This.date.getMonth ();
    this.changeselect ();
    this.binddata ();
 }
  if (Popcontrol = null) {
    popcontrol = Datecontrol;
 }
  var xy = This.getabspoint (Popcontrol);
  This.panel.style.left = xy.x + "px";
  This.panel.style.top = (xy.y + datecontrol.offsetheight) + "px";
  This.setdisplaystyle ("select", "hidden");
  this.panel.style.visibility = "visible";
}

Hide Calendar
Calendar.prototype.hide = function () {
This.setdisplaystyle ("Select", "visible");
this.panel.style.visibility = "hidden";
}

To set the control to show or hide
Calendar.prototype.setDisplayStyle = function (TagName, style) {
var tags = this.getelementsbytagname (null, tagName)
for (var i = 0; i < tags.length; i++) {
if (tagname.tolowercase () = = "Select" &&
(Tags[i].name = = "CalendarYear" | |
Tags[i].name = = "Calendarmonth")) {
Continue
}
Tags[i].style.visibility = style;
}
}

document.write (' <div id= ' Calendarpanel "style=" position:absolute;visibility:hidden;z-index:9999; Background-color: #FFFFFF; border:1px solid #CCCCCC; width:175px;font-size:12px; " ></div> ');
var calendar = new Calendar ();
Call Calendar.show (Datecontrol, Popcontrol);
-->

Demo: webcalendar.htm

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>web Calender control Powered by kimsoft</title>

<body>
<script language= "JavaScript" type= "Text/javascript" src= "Webcalendar.js" ></script>
<script language= "JavaScript" type= "Text/javascript"
//var calendar_cn = new Calendar (2000, 2010, 0);
//var calendar_en = new Calendar (1990, 2050, 1, "dd-mm-yy");
</script>
<form id= "Form1" Name= "Form1" method= "Post" action= ""
  <label>
  <input name= "date" type= "text" id= "date" size= "ten" maxlength= "" readonly= "readonly"/>
  </ Label>
  <p> </p>
  <p>
    <label>
     <select name= "select"
    </select>
    </label
    <br>
  </p>
</form>
<p><br>
  < Br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <BR>
  <input name= "date" type= "text" id= "Date1"/>
</p>
<p>
  <select Name= "Select2"
  </select>
  <select name= "Select3"
  </select>
  <select name= "Select4"
  </select>
</p>
</body>







Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.