Compatible Browsers:
Example: View Code Demo
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Date Picker</title>
<script type="text/javascript">
<!--
// Begin Date Picker
// == This Script Free To Use Providing This Notice Remains == //
// == This Script Has Been Found In The https://snapbuilder.com Free Public Codes Library == //
// == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == //
// == Created by: Mozilla Developer Network : https://developer.mozilla.org/ : GNU Public License, version 3 or later == //
// == http://www.gnu.org/licenses/gpl-3.0-standalone.html == //
(function () {
function DatePicker (oTarget) {
const
oTable = document.createElement("table"), oHRow = document.createElement("tr"),
oTHead = document.createElement("thead"), oCapt = document.createElement("caption"),
oDecrYear = document.createElement("span"), oIncrYear = document.createElement("span"),
oDecrMonth = document.createElement("span"), oIncrMonth = document.createElement("span");
var
nId = aInstances.length, oTH;
this.target = oTarget;
this.display = document.createElement("span");
this.current = new Date();
this.container = oTable;
this.display.className = sPrefs + "-current-month";
this.id = nId;
oTable.className = sPrefs + "-calendar";
oTable.id = sPrefs + "-cal-" + nId;
oDecrYear.className = sPrefs + "-decrease-year";
oDecrMonth.className = sPrefs + "-decrease-month";
oIncrMonth.className = sPrefs + "-increase-month";
oIncrYear.className = sPrefs + "-increase-year";
oDecrYear.innerHTML = "\u00AB"; /* « */
oDecrMonth.innerHTML = "\u003C"; /* < */
oIncrMonth.innerHTML = "\u003E"; /* > */
oIncrYear.innerHTML = "\u00BB"; /* » */
oDecrYear.id = sPrefs + "-decr-year-" + nId;
oDecrMonth.id = sPrefs + "-decr-month-" + nId;
oIncrMonth.id = sPrefs + "-incr-month-" + nId;
oIncrYear.id = sPrefs + "-incr-year-" + nId;
oDecrYear.onmousedown = oIncrYear.onmousedown = oDecrMonth.onmousedown = oIncrMonth.onmousedown = onHeadClick;
for (var nThId = 0; nThId < 7; nThId++) {
oTH = document.createElement("th");
oTH.innerHTML = sDays[nThId];
oHRow.appendChild(oTH);
}
oTHead.appendChild(oHRow);
oCapt.appendChild(oDecrYear); oCapt.appendChild(oDecrMonth); oCapt.appendChild(oIncrYear); oCapt.appendChild(oIncrMonth);
oCapt.appendChild(this.display); this.container.appendChild(oCapt); this.container.appendChild(oTHead);
this.current.setDate(1);
this.writeDays();
oTarget.onclick = function () {
if (oTable.parentNode) {
oTable.parentNode.removeChild(oTable);
return;
}
oTable.style.zIndex = nZIndex++;
oTable.style.position = "absolute";
oTable.style.left = oTarget.offsetLeft + "px";
oTable.style.top = (oTarget.offsetTop + oTarget.offsetHeight) + "px";
oTarget.parentNode.insertBefore(oTable, oTarget);
};
aInstances.push(this);
}
DatePicker.prototype.writeDays = function () {
const
nEndBlanks = (this.current.getDay() + bZeroIsMonday * 6) % 7,
nEnd = aMonthLengths[this.current.getMonth()] + nEndBlanks,
nTotal = nEnd + ((7 - nEnd % 7) % 7);
var
oTD, oTR;
if (this.oTBody) { this.container.removeChild(this.oTBody); }
this.oTBody = document.createElement("tbody");
for (var nDay, oDay, nIter = 0; nIter < nTotal; nIter++) {
if (nIter % 7 === 0) {
oTR = document.createElement("tr");
this.oTBody.appendChild(oTR);
}
nDay = nIter - nEndBlanks + 1;
oTD = document.createElement("td");
if (nIter + 1 > nEndBlanks && nIter < nEnd) {
oTD.className = sPrefs + "-active-cell";
oTD.id = sPrefs + "-day-" + this.id + "-" + nDay;
oTD.onclick = onDayClick;
oTD.appendChild(document.createTextNode(nDay));
} else {
oTD.className = sPrefs + "-empty-cell";
}
oTR.appendChild(oTD);
}
this.display.innerHTML = sMonthsNames[this.current.getMonth()] + " " + this.current.getFullYear();
this.container.appendChild(this.oTBody);
};
function onDocClick (oPssEvt) {
const oEvt = oPssEvt || /* IE */ window.event;
var bOutside = true;
for (var oNode = oEvt.target || /* IE */ oEvt.srcElement; oNode; oNode = oNode.parentNode) {
if (oNode.className === sPrefs + "-calendar" || oNode.className === sDPClass) {
bOutside = false;
break;
}
}
if (bOutside) { return; }
aInstances[oNode.id.replace(rBgnNaN, "")].container.style.zIndex = nZIndex++;
}
function onHeadClick () {
const bIsMonth = rMonth.test(this.id), nDelta = rDecrease.test(this.id) ? -1 : 1, oThisCal = aInstances[this.id.replace(rBgnNaN, "")];
oThisCal.current[bIsMonth ? "setMonth" : "setYear"](oThisCal.current[bIsMonth ? "getMonth" : "getFullYear"]() + nDelta);
oThisCal.writeDays();
return false;
}
function onDayClick () {
const oThisCal = aInstances[this.id.replace(rBgnANDEnd, "")];
oThisCal.target.value = (this.innerHTML / 100).toFixed(2).substr(-2) + "\/" + (oThisCal.current.getMonth() + 1) + "\/" + oThisCal.current.getFullYear();
oThisCal.container.parentNode.removeChild(oThisCal.container);
return false;
}
function buildCalendars () {
const aFields = document.getElementsByClassName(sDPClass), nLen = aFields.length;
for (var nItem = 0; nItem < nLen; new DatePicker(aFields[nItem++]));
}
const
/* customizable by user */
sPrefs = "zdp";
sDPClass = "date-picker",
sMonthsNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
sDays = ["M", "T", "W", "T", "F", "S", "S"],
bZeroIsMonday = true,
/* internal usage */
aInstances = [],
aMonthLengths = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
rBgnNaN = /^\D+/, rBgnANDEnd = /^\D+|\D+\d+$/g, rMonth = /\-month\-/, rDecrease = /\-decr\-/;
var
/* customizable by user */
nZIndex = 1000;
window.addEventListener ? addEventListener("load", buildCalendars, false) : window.attachEvent ? attachEvent("onload", buildCalendars) : (onload = buildCalendars);
document.addEventListener ? document.addEventListener("mousedown", onDocClick, false) : document.attachEvent ? document.attachEvent("onmousedown", onDocClick) : (document.onmousedown = onDocClick);
})();
// -->
</script>
<style>
BODY {font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000;}
#content {margin:0px 15px 0px 15px; padding:15px 15px 15px 15px;}
table.zdp-calendar {
border:1px solid #666666;
border-collapse:collapse;
background-color:#e6e6e6;
cursor:default;
font-family:verdana;
font-size:12px;
}
table.zdp-calendar th {
border:1px solid #666666;
font-weight:bold;
background-color:#ff6666;
}
table.zdp-calendar td {
border:1px solid #666666;
text-align:center;
}
table.zdp-calendar caption {
background-color:#333333;
padding:2px;
}
span.zdp-current-month {
display:inline-block;
width:auto;
height:16px;
padding:0 2px;
line-height:16px;
margin:0 auto;
background-color:#999999;
border-radius:5px;
}
span.zdp-increase-month, span.zdp-increase-year, span.zdp-decrease-month, span.zdp-decrease-year {
display:block;
padding:0 2px;
height:16px;
font-weight:bold;
background-color:#999999;
border-radius:5px;
cursor:pointer;
}
span.zdp-decrease-month, span.zdp-decrease-year {
float:left;
margin-right:2px;
}
span.zdp-increase-month, span.zdp-increase-year {
float:right;
margin-left:2px;
}
td.zdp-active-cell {
padding:1px 3px;
cursor:pointer;
color:#000000;
text-align:center;
vertical-align:middle;
}
td.zdp-active-cell:hover {
background-color:#999999;
cursor:pointer;
}
td.zdp-empty-cell {
cursor:not-allowed;
}
</style>
</head>
<body>
<div id="content">
<h3>Date Picker</h3>
<p>Click inside the form input box to open the date picker.</p>
<form name="myform">
<p>From: <input type="text" readonly class="date-picker" name="date-from" /> To: <input type="text" readonly class="date-picker" name="date-to" /></p>
</form>
</div>
</body>
</html>