Date Picker - Add a date picker calendar to your forms.
Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser
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>