Recommended JavaScript Calendar controls compatible with IE, FireFox

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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;

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 < 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 > 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>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Recommended JavaScript Calendar controls compatible with IE, FireFox

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support

Recommended JavaScript Calendar controls compatible with IE, FireFox

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

Trending Topic

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support