Asp. NET to add Calendar.js sample code to textbox _ Practical Tips

1. Under the project file, create a new folder "JS", and then add Javascript.js to the new item, renamed to Calendar.js.

2. Write code to Calendar.js,

Copy Code code as follows:

var cal;
var Isfocus=false; Whether the focus
function Selectdate (Obj,strformat)//two parameters instead of one
function Selectdate (obj)
{
var date = new Date ();
var by = Date.getfullyear ()-80; Minimum value →80 years ago
var ey = date.getfullyear () +20; Maximum value → 20 years later
Cal = (cal==null)? New Calendar (by, EY, 0): Cal; Initialized to Chinese version, 1 to English version
Cal.dateformatstyle = Strformat; The default display format is: YYYY-MM-DD, and can also display YYYY/MM/DD
Cal.show (obj);
}
/**//* Return Date * *
String.prototype.toDate = function (style) {
var y = this.substring (style.indexof (' y '), style.lastindexof (' y ') +1);
var m = this.substring (Style.indexof (' m '), Style.lastindexof (' m ') +1);/month
var d = this.substring (Style.indexof (' d '), Style.lastindexof (' d ') +1);//day
if (isNaN (y)) y = new Date (). getFullYear ();
if (isNaN (m)) m = new Date (). getmonth ();
if (isNaN (d)) d = new Date (). GetDate ();
var dt;
eval ("dt = new Date (' + y+" ', ' "+ (m-1) +" ', ' "+ D +" ') ");
return DT;
}
/**//* Format Date * *
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+": "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 2009
* @param endyear 2015
* @param lang 0 (Chinese) |1 (English) free to expand
* @param dateformatstyle "YYYY-MM-DD";
*/
function Calendar (beginyear, endyear, Lang, Dateformatstyle) {
This.beginyear = 2009;
This.endyear = 2015;
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.container = This.getelementbyid ("Containerpanel");
This.form = null;

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


This.colors = {
"Cur_word": "#FFFFFF",//day Date text color
"CUR_BG": "#83A6F4",//day date cell background color
"SEL_BG": "#FFCCCC",//Selected 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 head background color
"Input_border": "#CCCCCC",//input border color of the control
"INPUT_BG": "#EFEFEF"//input control's 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] = ' <div name= ' calendarform ' style= ' margin:0px; > ';
Mvary[mvary.length] = ' <table width= ' 100% "border=" 0 "cellpadding=" 0 "cellspacing=" 1 ">";
Mvary[mvary.length] = ' <tr> ';
Mvary[mvary.length] = ' <th align= "left" width= "1%" ><input style= "border:1px solid ' + calendar.colors[" input_b Order "] + '; Background-color: ' + calendar.colors[" INPUT_BG "] + '; width:16px;height:20px;" Name= "Prevmonth" type= " Button "id=" Prevmonth "value=" < "/></th>";
Mvary[mvary.length] = ' <th align= ' center "width=" 98% "><select name=" CalendarYear "id=" CalendarYear "style=" width:48%;font-size:12px; " ></select><select name= "Calendarmonth" id= "Calendarmonth" style= "font-size:12px;width:48%"; ></select></th> ';
Mvary[mvary.length] = ' <th align= "right" width= "1%" ><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=" > "/></th>";
Mvary[mvary.length] = ' </tr> ';
Mvary[mvary.length] = ' </table> ';
Mvary[mvary.length] = ' <table id= ' calendartable "width=" 100% "style=" border:0px solid #CCCCCC; background-color:# FFFFFF "border=" 0 "cellpadding=" 3 "cellspacing=" 1 ">";
Mvary[mvary.length] = ' <tr> ';
for (var i = 0; i < 7; i++) {
Mvary[mvary.length] = ' <th style= ' font-weight:normal;background-color: ' + calendar.colors[' tr_bg '] + '; color: ' + calendar.colors["Tr_word"] + '; ' > ' + calendar.language[' weeks '][this.lang][i] + ' </th> ';
}
Mvary[mvary.length] = ' </tr> ';
for (var i = 0; i < 6;i++) {
Mvary[mvary.length] = ' <tr align= ' center ' > ';
for (var j = 0; J < 7; J + +) {
if (j = = 0) {
Mvary[mvary.length] = ' <td style= ' cursor:default;color: ' + calendar.colors[' sun_word '] + '; ' ></td> ';
else if (j = = 6) {
Mvary[mvary.length] = ' <td style= ' cursor:default;color: ' + calendar.colors[' sat_word '] + '; ' ></td> ';
} else{
Mvary[mvary.length] = ' <td style= ' cursor:default; ></td> ';
}
}
Mvary[mvary.length] = ' </tr> ';
}
Mvary[mvary.length] = ' <tr style= ' background-color: ' + calendar.colors[' input_bg '] + '; ' > ';
Mvary[mvary.length] = ' <th colspan= ' 2 "><input name=" calendarclear "type=" button "id=" Calendarclear "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; " /></th> ';
Mvary[mvary.length] = ' <th colspan= ' 3 "><input name=" Calendartoday "type=" button "id=" Calendartoday "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; " /></th> ';
Mvary[mvary.length] = ' <th colspan= ' 2 "><input name=" calendarclose "type=" button "id=" Calendarclose "value=" " + calendar.language["Close"][this.lang] + ' "style=" border:1px solid ' + calendar.colors["input_border"] + '; background- Color: ' + calendar.colors["INPUT_BG"] + '; width:100%;height:20px;font-size:12px; " /></th> ';
Mvary[mvary.length] = ' </tr> ';
Mvary[mvary.length] = ' </table> ';
Mvary[mvary.length] = ' </div> ';
This.panel.innerHTML = Mvary.join ("");

var obj = This.getelementbyid ("Prevmonth");
Obj.onclick = function () {calendar.goprevmonth (calendar);}
Obj.onblur = function () {Calendar.onblur ();}
This.prevmonth= obj;

obj = This.getelementbyid ("Nextmonth");
Obj.onclick = function () {calendar.gonextmonth (calendar);}
Obj.onblur = function () {Calendar.onblur ();}
This.nextmonth= obj;


obj = This.getelementbyid ("Calendarclear");
Obj.onclick = function () {calendar.dateControl.value = ""; Calendar.hide ();}
This.calendarclear = obj;

obj = This.getelementbyid ("Calendarclose");
Obj.onclick = function () {calendar.hide ();}
This.calendarclose = obj;

obj = This.getelementbyid ("CalendarYear");
Obj.onchange = function () {calendar.update (calendar);}
Obj.onblur = function () {Calendar.onblur ();}
This.calendaryear = obj;

obj = This.getelementbyid ("Calendarmonth");
With (obj)
{
onchange = function () {calendar.update (calendar);}
onblur = function () {Calendar.onblur ();}
}this.calendarmonth = obj;

obj = This.getelementbyid ("Calendartoday");
Obj.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 ();
}
This.calendartoday = obj;
}

Year dropdown box binding data
Calendar.prototype.bindYear = function () {
var cy = this.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.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.calendaryear;
var cm = This.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 ()) {
Cm[i].selected = true;
Break
}
}
}

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

Bind data to Month view
Calendar.prototype.bindData = function () {
var calendar = this;
var Datearray = This.getmonthviewarray (This.date.getFullYear (), This.date.getMonth ());
var tds = This.getelementbyid ("calendartable"). getElementsByTagName ("TD");
for (var i = 0; i < tds.length; i++) {
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.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

Set date cells that have been selected background color
if (Calendar.datecontrol!= null && calendar.dateControl.value = = new Date (Calendar.date.getFullYear (),
Calendar.date.getMonth (),
Datearray[i]). Format (Calendar.dateformatstyle)) {
Tds[i].style.backgroundcolor = calendar.colors["SEL_BG"];
Tds[i].onmouseover = function () {
This.style.backgroundColor = calendar.colors["Td_bg_over"];
}
Tds[i].onmouseout = function () {
This.style.backgroundColor = calendar.colors["SEL_BG"];
}
}
}
}
}

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 (Dateobj, Popcontrol) {
if (dateobj = = null) {
throw new Error ("arguments[0] is necessary")
}
This.datecontrol = Dateobj;

This.date = (dateObj.value.length > 0)? New Date (DateObj.value.toDate (This.dateformatstyle)): new Date ()//If NULL displays current month
This.year = This.date.getFullYear ();
This.month = This.date.getMonth ();
This.changeselect ();
This.binddata ();
if (Popcontrol = = null) {
Popcontrol = Dateobj;
}
var xy = this.getabspoint (Popcontrol);
This.panel.style.left = xy.x-25 + "px";
This.panel.style.top = (xy.y + dateobj.offsetheight) + "px";

This.panel.style.display = "";
This.container.style.display = "";

Dateobj.onblur = function () {Calendar.onblur ();}
This.container.onmouseover = function () {isfocus=true;}
This.container.onmouseout = function () {isfocus=false;}
}

Hide Calendar
Calendar.prototype.hide = function () {
This.panel.style.display = "None";
This.container.style.display = "None";
Isfocus=false;
}

Hide Calendar when focus transfer
Calendar.prototype.onblur = function () {
if (!isfocus) {this.hide ();}
}
document.write (' <div id= "Containerpanel" style= "Display:none;" ><div id= "Calendarpanel" style= "position:absolute;display:none;z-index:9999;");
document.write (' Background-color: #FFFFFF; border:1px solid #CCCCCC; width:175px;font-size:12px;margin-left:25px; " ></div> ');
if (document.all)
{
document.write (' <iframe style= ' position:absolute;z-index:2000;width:expression ( This.previousSibling.offsetWidth);
document.write (' Height:expression (this.previousSibling.offsetHeight); ');
document.write (' Left:expression (this.previousSibling.offsetLeft); Top:expression (This.previousSibling.offsetTop );');
document.write (' Display:expression (This.previousSibling.style.display); "scrolling=" No "frameborder=" no ">< /iframe> ');
}
document.write (' </div> ');

3. After saving the file, it completes the writing of the JS Calendar control.

4. Write at the source of the corresponding need calendar control under the head tag

Copy Code code as follows:

<script type= "Text/javascript" src= ". /js/calendar.js "></script>

Where SRC is the location of your JavaScript

5. All fill out the date textbox, add these two properties: readonly= "True" onclick= "selectdate (This)"