Add the calendar. js sample code to TextBox in ASP. NET

1. Create a folder "js" under the project file, add a new JavaScript. js item to it, and rename it calendar. js.

2. write code to calendar. js,
Copy codeThe Code is as follows:
Var cal;
Var isFocus = false; // whether it is the focus
// Function SelectDate (obj, strFormat) // you can specify only one parameter.
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; // initialize to Chinese version, 1 to English version
// Cal. dateFormatStyle = strFormat; // The default display format is yyyy-MM-dd.
Cal. show (obj );
}
/** // * Return date */
String. prototype. toDate = function (style ){
Var y = this. substring (style. indexOf ('y'), style. lastIndexOf ('y') + 1); // year
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 the 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 +": "five or six days, January 1, 1234". 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;
};

/**//*
* Calendar
* @ Param beginYear 2009
* @ Param end year 2015
* @ Param lang 0 (Chinese) | 1 (English) scalable
* @ 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", // Date text color of the current day
"Cur_bg": "#83A6F4", // background color of the date cell of the current day
"Sel_bg": "# FFCCCC", // the background color of the selected date Cell
"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 is 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", // the background color of the calendar Header
"Input_border": "# CCCCCC", // border color of the input control
"Input_bg": "# EFEFEF" // background color of the input control
}

This. draw ();
This. bindYear ();
This. bindMonth ();
This. changeSelect ();
This. bindData ();
}

/**//*
* Calendar attributes (Language Pack, scalable)
*/
Calendar. language = {
"Year": [[""], [""],
"Months": [["August", "August ", "August", "August", "August"],
["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP ", "OCT", "NOV", "DEC"]
],
"Weeks": [["," 1 "," 2 "," 3 "," 4 "," 5 "," 6 "],
["SUN", "MON", "TUR", "WED", "THU", "FRI", "SAT"]
],
"Clear": [["clear"], ["CLS"],
"Today": [["TODAY"], ["today"],
"Close": [["CLOSE"], ["close"]
}

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_border"] + '; 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;
}

// Bind data to the year drop-down box
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 );
}
}

// Bind data to the month drop-down box
Calendar. prototype. bindMonth = function (){
Var cm = this. calendarMonth;
Cm. length = 0;
For (var I = 0; I <12; I ++ ){
Cm. options [cm. length] = new Option (Calendar. language ["months"] [this. lang] [I], I );
}
}

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

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

// Change the SELECT status
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;
}
}
}

// Update year and 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 the monthly 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 the background color of the selected date Cell
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"];
}
}
}
}
}

// Obtain monthly View data by year and month (in 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 <42; 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 );
}

// Obtain the absolute position of the 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 };
}

// Display 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 it is null, the current month is displayed.
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 the calendar
Calendar. prototype. hide = function (){
This. panel. style. display = "none ";
This. container. style. display = "none ";
IsFocus = false;
}

// Hide the calendar when the focus is transferred
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. previussibling. offsetWidth );');
Document. write ('height: expression (this. previussibling. offsetHeight );');
Document. write ('left: expression (this. previussibling. offsetLeft); top: expression (this. previussibling. offsetTop );');
Document. write ('display: expression (this. previussibling. style. display); "scrolling =" no "frameborder =" no "> </iframe> ');
}
Document. write ('</div> ');

3. After saving the file, the js calendar control is compiled.

4. Write it under the head label at the source of the calendar control.
Copy codeThe Code is as follows:
<Script type = "text/javascript" src = "../js/calendar. js"> </script>

Src is your JavaScript location.

5. Add these two attributes to all TextBox with the date filled in: ReadOnly = "True" onclick = "SelectDate (this )"