Home > Developer > JavaScript
Usually only after work time can code, free to write a pure JavaScript version. The Calendar.js file is referenced, and then the ID of the input to be set to the Calendar control is set to calendar, and the input is changed to a calendaring control.
<!doctype html>
When referencing Calendar.js, be sure to add the defer attribute.
Calendar.js Source:
JavaScript Document var days = new Array ("Day", "one", "two", "three", "four", "five", "six");/week var today = new Date ()//day date, alternate var month_ Big = new Array ("1", "3", "5", "7", "8", "10", "12"); Contains all semi-rotary array var month_small = new Array ("4", "6", "9", "11");
Array var separator = "-" that contains all the Luna,//spacer var calendar = document.getElementById ("Calendar"); var cal_parent = calendar.parentnode;//Gets the parent element var cal_width = ((calendar.clientwidth<150)? 150:calendar.clientwidth) ;//Get the width of input, if input width is less than 150, adjust to 150,150 for the minimum width of the calendar block var cal_height = calendar.clientheight;//Get input height, integer var cal_x =
calendar.offsetleft;//gets the distance from the parent element to the left of the input, the integer var cal_y = calendar.offsettop;//Gets the distance from the parent element at the top of the input, and the integer Calendar.style.cursor = "pointer";//Set Input mouse to small hand calendar.readonly = "readOnly";/set input to read-only Calendar.onblur = Hidecalendar; When input loses focus, hide cal_body Calendar.onclick = showcalendar;//call Showcalendar function//Take input width of one-seventh and subtract one as box edges var
Pane_height = CAL_WIDTH/7-1; function Hidecalendar () {var cal_body = document.getElementById ("Cal_Body ");
if (cal_body!= undefined) {cal_body.parentNode.removeChild (cal_body);
}//Show calendar principal function Showcalendar () {var cal_body = document.getElementById ("Cal_body");
if (cal_body!= undefined) {cal_body.parentNode.removeChild (cal_body);
} else{var cal_body = document.createelement ("DIV");
Cal_body.id = "Cal_body";
Cal_body.style.width = cal_width + "px";
Cal_body.style.height = "Auto";
Cal_body.style.overflow = "hidden";
Cal_body.style.position = "absolute";
Cal_body.style.zIndex = "9";
Cal_body.style.left = cal_x + "px";
Cal_body.style.top = (cal_y + cal_height + 5) + "px";
Cal_body.style.border = "solid 1px #CCCCCC"; When the mouse moves to the cal_body, disables the input onblur event to prevent Cal_body from losing focus on the input and is hidden cal_body.onmouseover = function () {Calendar.onblur = und
efined; ///mouse from Cal_body to enable input of the onblur event, and let input get focus, otherwise when the cal_body on the blank click and then move out of the other places click, input because there is no focus to trigger the onblur event Cal_
Body.onmouseout = function () {calendar.focus ();
Calendar.onblur = Hidecalendar; } CAL_parent.appendchild (Cal_body);
var line1 = document.createelement ("DIV");
Line1.style.width = cal_width + "px";
Line1.style.height = pane_height + "px";
Line1.style.backgroundColor = "#0FF";
var btn1 = document.createelement ("DIV");
Btn1.style.width = (CAL_WIDTH/3-3) + "px";
Btn1.style.height = pane_height + "px";
Btn1.style.lineHeight = pane_height + "px";
btn1.style.textAlign = "center";
btn1.innerhtml = "<";
Btn1.style.cursor = "pointer";
Btn1.style.cssFloat = "Left";
Btn1.onclick = function () {if (isvalidated ()) {var old_year = parseint (document.getElementById ("Input_year"). Value);
if (Old_year > 1960) {var year = old_year-1;
var month = parseint (document.getElementById ("Input_month"). Value);
var val = year + separator + month + separator + 1;
Init (val);
}
}
};
Line1.appendchild (BTN1);
var input_year = document.createelement ("input");
Input_year.id = "Input_year"; Input_year.style.width =(CAL_WIDTH/3) + "px";
Input_year.style.height = "70%";
Input_year.style.cssFloat = "Left";
input_year.style.textAlign = "center";
Input_year.onchange = function () {changed ();
};
Line1.appendchild (input_year);
var btn2 = document.createelement ("DIV");
Btn2.style.width = (CAL_WIDTH/3-3) + "px";
Btn2.style.height = pane_height + "px";
Btn2.style.lineHeight = pane_height + "px";
btn2.style.textAlign = "center";
btn2.innerhtml = ">";
Btn2.style.cursor = "pointer";
Btn2.style.cssFloat = "Left";
Btn2.onclick = function () {if (isvalidated ()) {var old_year = parseint (document.getElementById ("Input_year"). Value);
if (Old_year < 2050) {var year = old_year + 1;
var month = parseint (document.getElementById ("Input_month"). Value);
var val = year + separator + month + separator + 1;
Init (val);
}
}
};
Line1.appendchild (BTN2);
var line2 = document.createelement ("DIV");
Line2.style.width = cal_width + "px"; Line2. Style.height = pane_height + "px";
Line2.style.backgroundColor = "#0FF";
var btn3 = document.createelement ("DIV");
Btn3.style.width = (CAL_WIDTH/3-3) + "px";
Btn3.style.height = pane_height + "px";
Btn3.style.lineHeight = pane_height + "px";
btn3.style.textAlign = "center";
btn3.innerhtml = "<";
Btn3.style.cursor = "pointer";
Btn3.style.cssFloat = "Left"; Btn3.onclick = function () {if (isvalidated ()) {var old_month = parseint (document.getElementById ("Input_month"). Value
if (Old_month > 1) {var year = parseint (document.getElementById ("Input_year"). Value);
var month = old_month-1;
var val = year + separator + month + separator + 1;
Init (val);
else {var year = parseint (document.getElementById ("Input_year"). Value)-1;
var month = 12;
var val = year + separator + month + separator + 1;
Init (val);
}
}
};
Line2.appendchild (BTN3);
var input_month = document.createelement ("input");Input_month.id = "Input_month";
Input_month.style.width = (CAL_WIDTH/3) + "px";
Input_month.style.height = "70%";
Input_month.style.cssFloat = "Left";
input_month.style.textAlign = "center";
Input_month.onchange = function () {changed ();
};
Line2.appendchild (Input_month);
var btn4 = document.createelement ("DIV");
Btn4.style.width = (CAL_WIDTH/3-3) + "px";
Btn4.style.height = pane_height + "px";
Btn4.style.lineHeight = pane_height + "px";
btn4.style.textAlign = "center";
btn4.innerhtml = ">";
Btn4.style.cursor = "pointer";
Btn4.style.cssFloat = "Left"; Btn4.onclick = function () {if (isvalidated ()) {var old_month = parseint (document.getElementById ("Input_month"). Value
if (Old_month <) {var year = parseint (document.getElementById ("Input_year"). Value);
var month = parseint (document.getElementById ("Input_month"). Value) + 1;
var val = year + separator + month + separator + 1;
Init (val); else {var yeAR = parseint (document.getElementById ("Input_year"). Value) + 1;
var month = 1;
var val = year + separator + month + separator + 1;
Init (val);
}
}
};
Line2.appendchild (BTN4);
Cal_body.appendchild (line1);
Cal_body.appendchild (line2);
for (Var i=0 i < 7; i++) {var pane = document.createelement ("DIV");
Pane.classname = "Pane";
Pane.style.width = pane_height + "px";
Pane.style.height = pane_height + "px";
Pane.style.lineHeight = pane_height + "px";
pane.style.textAlign = "center";
Pane.style.cssFloat = "Left";
pane.innerhtml = Days[i];
Cal_body.appendchild (pane);
Init (Calendar.value);
} function init (val) {Clearpane ();
var cal_body = document.getElementById ("Cal_body");
var temp_date;
VAR year;
Var month;
var date;
if (val = = "") {temp_date = today;
Calendar.value = today.toformatstring (separator);
} else{Year = Val.year ();
month = Val.month (separator);
Date = val.date (separator); TeMp_date = new Date (year,month,date);
Year = Temp_date.getfullyear ();
month = Temp_date.getmonth () + 1;
Date = Temp_date.getdate ();
Temp_date.setdate (1);
var start = Temp_date.getday () + 7;
var end;
if (Array_contain (Month_big, month)) {end = start + 31;
else if (Array_contain (Month_small, month)) {end = start + 30;
} else{if (isleapyear) {end = start + 29;
else{end = start + 28;
for (var i = 7; i < start; i++) {var pane = document.createelement ("DIV");
Pane.classname = "Pane";
Pane.style.width = pane_height + "px";
Pane.style.height = pane_height + "px";
Pane.style.lineHeight = pane_height + "px";
pane.style.textAlign = "center";
Pane.style.cssFloat = "Left";
Cal_body.appendchild (pane);
for (var i = start, I < end; i++) {var pane = document.createelement ("DIV");
Pane.classname = "Pane";
Pane.style.width = pane_height + "px";
Pane.style.height = pane_height + "px"; pane.style.lineHeight = Pane_height + "px";
pane.style.textAlign = "center";
Pane.style.cssFloat = "Left";
pane.innerhtml = I-start + 1;
Pane.style.cursor = "pointer";
Pane.onmouseover = function () {This.style.backgroundColor = ' #0FF ';
if (date = = (I-start + 1)) Pane.style.backgroundColor = ' #0FF ';
else{pane.onmouseout = function () {this.style.backgroundColor = ';
} Pane.onclick = function () {Calendar.value = year + separator + month + separator + this.innerhtml;
Cal_body.parentNode.removeChild (Cal_body);
} cal_body.appendchild (pane);
document.getElementById ("Input_year"). Value = year;
document.getElementById ("Input_month"). Value = month; }//Formatted output Date.prototype.toFormatString = function (separator) {var result = This.getfullyear () + Separator + (this.get
Month () + 1) + separator + this.getdate ();
return result;
};
Gets the Year String.prototype.year = function () {var str = this.substring (0,4) from the formatted string;
return str;
}; Gets the month String.prototype from the formatted string. month = function (separator) {var start = This.indexof (separator) + 1;
var end = This.lastindexof (separator);
Return parseint (this.substring (Start))-1;
};
Gets the date from the formatted string String.prototype.date = function (separator) {var start = This.lastindexof (separator) + 1;
Return this.substring (start);
}; A function that determines whether the element obj is contained in array arrays, contains returns True, does not contain returns false function Array_contain (array, obj) {for (var i = 0; i < array.length i
+ +) {if (array[i] = = obj) return true;
return false;
//Determine if year is a leap years, is a leap age returns true, otherwise returns false function Isleapyear {var a = 4;
var b = year% 100;
var c = year% 400; if (((a = = 0) && (b!= 0)) | | (c = = 0))
{return true;
return false;
//Clear the Grid function Clearpane () {var limit = document.getelementsbyclassname ("Pane"). Length;
for (Var i=7 i < limit i++) {var pane = document.getelementsbyclassname ("Pane"). Item (7);
Pane.parentNode.removeChild (pane); }//Judge whether the input is legal function isvalidated () {var year = Document.getelemEntbyid ("Input_year"). Value;
var month = document.getElementById ("Input_month"). Value;
if (isNaN) | | isNaN (month)) {alert ("Please enter the correct year/month");
return false;
} else{if (year%1!= 0 | | month%1!= 0) {alert ("Please enter the correct year/month");
return false;
} else{Year = parseint (year); if (Year < 1960 | | | | years > 2050) {alert ("Please enter the vintage between 1960~2050!")
");
return false; else if (Month < 1 | | month >12) {alert (Please enter the correct month!)
");
return false;
} else{return true; Processing function functions changed () {if (isvalidated ()) {var year = document.getElementById ("Input_year")}}//Years change. val
Ue
var month = document.getElementById ("Input_month"). Value;
var val = year + separator + month + separator + 1;
Init (val);
}
}
The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
