Un esempio di Date Picker realizzato in JavaScript puro (Vanilla JS) senza altre dipendenze esterne che supporta il formato date l'italiano.
Può essere usato anche con framework tipo Knockout JS.Sgart Date PickerQuesto è il codice del Date Picker
JavaScript: sgart-date-picker.js
function SgartDatePicker() {
var CSS_BASE = "sgart-date-picker";
var ATTR_IDENTIFIER = CSS_BASE;
var ATTR_IDENTIFIER_TRUE = "true";
var ATTR_DATE = "sgart-date";
var ATTR_CMD = "sgart-cmd";
var CMD_NEXT = "next";
var CMD_PREV = "prev";
var CMD_TODAY = "today";
var CMD_MODE_YEAR = "mode-year";
var CMD_MODE_MONTH = "mode-month";
var CMD_CHANGE_DATE = "change-date";
var CMD_SELECT_DAY = "select-day";
var MODE_DAY = 0;
var MODE_MONTH = 1;
var MODE_YEAR = 2;
var YEAR_SHOW_NUMBER = 4 * 4;
// il primo (index 0) è il default
var supportedLanguages = [
{
lcid: 1033,
code: 'en-US',
firstDayOfWeek: 0, // 0=sunday, 1=Monday....6=Saturday
dayLabels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
monthLabels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
todayLabel: "Today",
dateFormat: "MM/dd/yyyy"
},
{
lcid: 1040,
code: 'it-IT',
firstDayOfWeek: 1,
dayLabels: ["Domenica", "Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato"],
monthLabels: ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"],
todayLabel: "Oggi",
dateFormat: "dd/MM/yyyy"
}
];
var elmWrapper = null;
var currentElementInput = null;
var currentDate = null;
var currentDateFirst = null; // riferito al mese/anno visualizzato
var currentLanguage = null;
var isOpen = false;
var mode = MODE_DAY; //0=day, 1=month, 2=year
var _dayOffset = [];
var _customClass = null;
var _showTodayButton = true;
var _weekendClassEnable = false;
var _handleCloseCallback = null;
function applyStyles() {
var styleStr = ""
// reset CSS
+ "[], []-headers,[]-month-year, []-prev, []-next,[]-table, []-labels, []-days,"
+ "[]-label, []-day, []-day-out, []-day-hidden,[]-day-today, []-day-n, []-day-footer"
+ "{box-sizing: border-box; clear: both; position: relative; font-size: 1rem; font-weight: normal; border: 1px solid transparent; padding:0; margin: 0; color: #222; background-color: transparent; height: 1.9rem; line-height: 1.9rem; text-align: center;}"
+ "[]-month-year, []-prev, []-next,[]-label, []-day, []-day-out, []-day-hidden,[]-day-today, []-day-n, []-day-footer"
+ "{width: 1.9rem}"
// style
+ "[] { position:absolute; padding: .5em; background-color: #fff; border: 1px solid #888; box-shadow: rgb(0 0 0 / 13%) 0px 6.4px 14.4px 0px, rgb(0 0 0 / 11%) 0px 1.2px 3.6px 0px; }"
+ "[], []-headers, []-labels, []-days, []-month-year { width: auto; height: auto; }"
+ "[]-month-year, []-prev, []-next { font-weight: bold; height: 2.5rem; line-height: 2.5rem; padding: 0;}"
+ "[]-month-year { text-align: left; padding-right: .5rem;}"
+ "[]-month-year span { display: inline-block; height: 2.5rem; line-height: 2.5rem; padding: 0 .5rem; cursor: default;}"
+ "[]-month-year span:hover, []-prev:hover, []-next:hover {background-color: #fdd;}"
+ "[]-month-year.disabled {background-color: #aaa;}"
+ "[]-prev { position: absolute; top:0; right: 2rem; width: 2rem;cursor: default;}"
+ "[]-next { position: absolute; top:0; right: 0; width: 2rem;cursor: default;}"
+ "[]-label {font-size: .8rem}"
+ "[]-day:hover {background-color: #fdd;}"
+ "[]-days[]-months []-day {width: 4em;} "
+ "[]-day-out []-day-n {color: #aaa;}"
+ "[]-day-n { border-radius: 100%; pointer-events: none; margin: 0 auto;}"
+ "[]-day-ss []-day-n { color: #aaa;}"
+ "[]-day-today {border-color: #caa; }"
+ "[]-day-selected []-day-n {background-color :#fdd; border-color: #caa; }"
+ "[]-footer {font-size: .8rem; cursor:default; height: 1.5rem; line-height: 1.5rem;}"
+ "[]-footer:hover {background-color: #fdd;}"
+ "[]-footer strong {pointer-events: none;}"
;
var style = document.createElement('style');
style.innerHTML = styleStr.replace(/\[\]/g, "." + CSS_BASE);
document.head.appendChild(style);
};
function setShowTodayButton(value) {
_showTodayButton = value === true;
if (isOpen === true) {
drawCalendar();
}
};
function setLanguage(lcidOrCode) {
// trovo la lingua
var code = null;
if (typeof lcidOrCode === 'string') {
lcidOrCode = lcidOrCode.toLowerCase();
}
var found = null;
for (let i = 0; i < supportedLanguages.length; i++) {
// trovo la lingua
var lang = supportedLanguages[i];
if (lang.lcid === lcidOrCode || lang.code.toLocaleLowerCase() === code) {
found = lang;
break;
}
}
if (found === null) {
found = supportedLanguages[0];
console.warn("LCID " + lcidOrCode + " not found, set " + found.lcid);
}
currentLanguage = found;
setFirstDayOfWeek(currentLanguage.firstDayOfWeek);
if (isOpen === true) {
drawCalendar();
}
};
function setCustomClass(className) {
_customClass = className;
};
function setFirstDayOfWeek(dayOfWeek) {
if (dayOfWeek < 0 || dayOfWeek > 6) {
dayOfWeek = 0;
}
var w = dayOfWeek;
for (var i = 0; i < 7; i++) {
if (w > 6) {
w = 0;
}
_dayOffset[i] = w;
w++;
}
};
function getFirstDayOfWeekOffset(dayOfWeek) {
return _dayOffset.indexOf(dayOfWeek);
};
function getMonthLabel(monthIndex) {
return currentLanguage.monthLabels[monthIndex];
};
function getDayLabel(dayOfWeek, charLen) {
var label = currentLanguage.dayLabels[dayOfWeek];
return label.substring(0, charLen === undefined || charLen === 0 ? label.length : charLen);
};
function setWeekendClassEnable(value) {
_weekendClassEnable = value === true;
};
function getWeekendClassEnable() {
return _weekendClassEnable;
};
function formatDateISO(dt) {
var d = dt.getDate();
var m = dt.getMonth() + 1;
var y = dt.getFullYear();
return y + "-" + (m > 9 ? "" : "0") + m + "-" + (d > 9 ? "" : "0") + d;
};
function parseDateISO(strDate) {
if (strDate == null)
return null;
var arr = strDate.split("-");
return new Date(parseInt(arr[0]), parseInt(arr[1]) - 1, parseInt(arr[2]));
};
function formatDate(dt) {
var d = dt.getDate();
var m = dt.getMonth() + 1;
return currentLanguage.dateFormat.replace("dd", (d > 9 ? "" : "0") + d).replace("MM", (m > 9 ? "" : "0") + m).replace("yyyy", dt.getFullYear());
};
function parseDate(strDate) {
var formatParts = currentLanguage.dateFormat.split("/");
var dateParts = strDate.split("/");
if (formatParts.length !== dateParts.length) {
console.log("error parseDate: " + formatParts + " | " + dateParts);
return null;
}
var year = -1;
var month = -1;
var day = -1;
for (var i = 0; i < dateParts.length; i++) {
switch (formatParts[i]) {
case "yyyy":
year = parseInt(dateParts[i]);
break;
case "MM":
month = parseInt(dateParts[i]) - 1;
break;
case "dd":
day = parseInt(dateParts[i]);
break;
default:
break;
}
}
return new Date(year, month, day);
};
function drawCalendar() {
var year = currentDateFirst.getFullYear();
var month = currentDateFirst.getMonth();
var cmd = null;
var sTable = null;
var title = null;
var today = new Date();
switch (mode) {
case MODE_YEAR:
cmd = null;
title = year + " - " + (year + YEAR_SHOW_NUMBER - 1);
sTable = drawCalendarYear(today);
break;
case MODE_MONTH:
cmd = CMD_MODE_YEAR;
title = year;
sTable = drawCalendarMonth(today);
break;
default:
cmd = CMD_MODE_MONTH;
title = getMonthLabel(month) + " " + year;
sTable = drawCalendarDay(today);
break;
}
var sHeaders = "<div class='[]-headers'>"
+ "<div class='[]-month-year'><span " + ATTR_CMD + "='" + cmd + "'>" + title + "</span></div>"
+ "<div class='[]-prev' " + ATTR_CMD + "='" + CMD_PREV + "'><</div>"
+ "<div class='[]-next' " + ATTR_CMD + "='" + CMD_NEXT + "'>></div>"
+ "</div>";
if (_showTodayButton === true) {
var sToday = "<div class='[]-footer' " + ATTR_CMD + "='" + CMD_TODAY + "'>" + currentLanguage.todayLabel + ":<strong>" + formatDate(today) + "</strong></div>";
} else {
var sToday = "";
}
var result = sHeaders + "<table class='[]-table'>" + sTable + "</table>" + sToday;
elmWrapper.innerHTML = result.replace(/\[\]/g, CSS_BASE);
elmWrapper.className = CSS_BASE + (_customClass === null ? "" : " " + _customClass);
};
function drawCalendarDay(today) {
var selectedYear = currentDate.getFullYear();
var selectedMonth = currentDate.getMonth();
var selectedDay = currentDate.getDate();
var year = currentDateFirst.getFullYear();
var month = currentDateFirst.getMonth();
var dtStart = new Date(currentDateFirst.getFullYear(), month, 1);
var dtEnd = new Date(year, month + 1, 0);
var offset = getFirstDayOfWeekOffset(dtStart.getDay());
dtStart.setDate(dtStart.getDate() - offset);
var rows = (offset + dtEnd.getDate()) / 7;
var todayYear = today.getFullYear();
var todayMonth = today.getMonth();
var todayDay = today.getDate();
var weekendClass = getWeekendClassEnable();
// header
var sLabels = "<tr class='[]-labels'>";
for (var c = 0; c < 7; c++) {
sLabels += "<th class='[]-label' title='" + getDayLabel(c) + "'>" + getDayLabel(c, 2) + "</div>";
}
sLabels += "</tr>";
// days
var str = "";
for (var r = 0; r < rows; r++) {
str += "<tr class='[]-days'>";
for (var c = 0; c < 7; c++) {
var cYear = dtStart.getFullYear();
var cMonth = dtStart.getMonth();
var cDay = dtStart.getDate();
var cWeekDay = dtStart.getDay()
var className = CSS_BASE + "-day"
+ (cMonth !== month ? " []-day-out" : "")
+ (todayYear === cYear && todayMonth === cMonth && todayDay === cDay ? " []-day-today" : "")
+ (selectedYear === cYear && selectedMonth === cMonth && selectedDay === cDay ? " []-day-selected" : "")
+ (weekendClass && (cWeekDay === 0 || cWeekDay === 6) ? " []-day-ss" : "");
var strDateISO = formatDateISO(dtStart);
str += "<td class='" + className + "' " + ATTR_DATE + "='" + strDateISO + "' " + ATTR_CMD + "='" + CMD_SELECT_DAY + "'><div class='[]-day-n'>" + cDay + "</div></td>";
dtStart.setDate(cDay + 1);
}
str += "</tr>";
}
return "<thead>" + sLabels + "</thead><body>" + str + "</body>";
}
function drawCalendarMonth(today) {
var year = currentDateFirst.getFullYear();
var selectedYear = currentDate.getFullYear();
var selectedMonth = currentDate.getMonth();
var todayYear = today.getFullYear();
var todayMonth = today.getMonth();
var str = "";
var m = 0;
for (var r = 0; r < 3; r++) {
str += "<tr class='[]-days []-months'>";
for (var c = 0; c < 4; c++) {
var lbl = currentLanguage.monthLabels[m].substring(0, 3);
var className = CSS_BASE + "-day"
+ (todayYear === year && todayMonth === m ? " []-day-today" : "")
+ (selectedYear === year && selectedMonth === m ? " []-day-selected" : "");
var dtStart = new Date(year, m, 1);
var strDateISO = formatDateISO(dtStart);
str += "<td class='" + className + "' " + ATTR_DATE + "='" + strDateISO + "' " + ATTR_CMD + "='" + CMD_CHANGE_DATE + "'><div class='[]-day-n'>" + lbl + "</div></td>";
m++;
}
str += "</tr>";
}
return "<body>" + str + "</body>";
};
function drawCalendarYear(today) {
var selectedYear = currentDate.getFullYear();
var selectedMonth = currentDate.getMonth();
var todayYear = today.getFullYear();
var str = "";
var year = currentDateFirst.getFullYear();
var cols = 4;
var rows = YEAR_SHOW_NUMBER / cols;
for (var r = 0; r < rows; r++) {
str += "<tr class='[]-days []-months'>";
for (var c = 0; c < cols; c++) {
var className = CSS_BASE + "-day"
+ (todayYear === year ? " []-day-today" : "")
+ (selectedYear === year ? " []-day-selected" : "");
var dtStart = new Date(year, selectedMonth, 1);
var strDateISO = formatDateISO(dtStart);
str += "<td class='" + className + "' " + ATTR_DATE + "='" + strDateISO + "' " + ATTR_CMD + "='" + CMD_CHANGE_DATE + "'><div class='[]-day-n'>" + year + "</div></td>";
year++;
}
str += "</tr>";
}
return "<body>" + str + "</body>";
};
function getElementCoord(element) {
var bound = element.getBoundingClientRect();
var top = ((bound.top + window.pageYOffset) + bound.height + 2);
var left = ((bound.left + window.pageXOffset) + 0);
return { top: top, left: left };
};
function setValue(dt) {
if (dt) {
currentElementInput.value = formatDate(dt)
closePopup(dt);
}
};
function changeDate(dt) {
currentDateFirst = dt == null ? new Date() : dt;
currentDateFirst.setDate(1);
if (isOpen === true) {
drawCalendar();
}
};
function handleOpenPopup(event) {
openPopup(event.target);
};
function openPopup(htmlElement, closeCallback) {
if (isOpen === true) {
if (htmlElement !== currentElementInput) {
closePopup();
} else {
return;
}
}
_handleCloseCallback = closeCallback == null ? null : closeCallback;
mode = MODE_DAY;
currentElementInput = htmlElement;
document.addEventListener("mousedown", handleDocumentMousedown);
currentElementInput.addEventListener("keydown", handleInputKeydown);
currentDate = parseDate(currentElementInput.value);
currentDateFirst = new Date(currentDate);
currentDateFirst.setDate(1);
drawCalendar();
var coord = getElementCoord(currentElementInput);
elmWrapper.style.top = coord.top + "px";
elmWrapper.style.left = coord.left + "px";
elmWrapper.style.display = "block";
isOpen = true;
};
function closePopup(dt) {
elmWrapper.style.display = "none";
isOpen = false;
document.removeEventListener("mousedown", handleDocumentMousedown);
currentElementInput.removeEventListener("keydown", handleInputKeydown);
currentElementInput = null;
if (_handleCloseCallback != null) {
_handleCloseCallback(dt == null ? null : {
date: dt,
formatted: formatDate(dt)
});
}
};
function isInCalendar(target) {
while (target !== null && target.tagName !== "BODY") {
if (target.classList.contains(CSS_BASE) === true) {
return true;
}
target = target.parentElement
}
// ho cliccato fuori dal calendario
return false;
};
function executeCommand(cmd, date) {
if (cmd) {
// ho cliccato su un bottone
switch (cmd) {
case CMD_SELECT_DAY:
if (date) {
// ho cliccato su un giorno
setValue(date);
}
break;
case CMD_TODAY:
setValue(new Date());
break;
case CMD_CHANGE_DATE:
if (mode === MODE_YEAR) {
mode = MODE_MONTH;
} else {
mode = MODE_DAY;
}
changeDate(date);
break;
case CMD_PREV:
case CMD_NEXT:
var offset = cmd === CMD_PREV ? -1 : 1;
switch (mode) {
case MODE_YEAR:
currentDateFirst.setFullYear(currentDateFirst.getFullYear() + offset * YEAR_SHOW_NUMBER);
break;
case MODE_MONTH:
currentDateFirst.setFullYear(currentDateFirst.getFullYear() + offset);
break;
default:
currentDateFirst.setMonth(currentDateFirst.getMonth() + offset);
break;
}
changeDate(currentDateFirst);
break;
case CMD_MODE_MONTH:
mode = MODE_MONTH;
drawCalendar();
break;
case CMD_MODE_YEAR:
mode = MODE_YEAR;
drawCalendar();
break;
}
return true;
}
return false;
};
function handleDocumentMousedown(event) {
if (isOpen === false) {
return;
}
if (event.target.getAttribute(ATTR_IDENTIFIER) === ATTR_IDENTIFIER_TRUE) {
// sono nell'input correntemente selezionato
return;
}
if (isInCalendar(event.target) === false) {
// ho cliccato fuori dal calendario
closePopup();
return;
}
// sono nel calendario
var cmd = event.target.getAttribute(ATTR_CMD);
var date = parseDateISO(event.target.getAttribute(ATTR_DATE));
executeCommand(cmd, date);
};
function handleInputKeydown(event) {
if (isOpen === false) {
return;
}
if (event.target.getAttribute(ATTR_IDENTIFIER) !== ATTR_IDENTIFIER_TRUE) {
// sono nell'input correntemente selezionato
return;
}
switch (event.keyCode) {
case 9: // tab
case 27: // esc
closePopup();
break;
case 13: // enter
closePopup();
event.preventDefault();
break;
case 33: // pageUp
executeCommand(CMD_PREV);
break;
case 34: // pageDown
executeCommand(CMD_NEXT);
break;
default:
break;
}
};
function addEvent(querySelector) {
var elmInputs = document.querySelectorAll(querySelector);
for (var i = 0; i < elmInputs.length; i++) {
var element = elmInputs[i];
element.setAttribute(ATTR_IDENTIFIER, ATTR_IDENTIFIER_TRUE);
element.addEventListener("focus", handleOpenPopup);
}
};
function init() {
applyStyles();
elmWrapper = document.createElement("div");
elmWrapper.style.display = "none";
elmWrapper.className = CSS_BASE;
document.body.appendChild(elmWrapper);
setLanguage(1040);
//setShowTodayButton(false);
//setCustomClass("prova")
};
init();
return {
addEvent: addEvent,
openPopup: openPopup,
setShowTodayButton: setShowTodayButton,
setCustomClass: setCustomClass,
setLanguage: setLanguage,
setWeekendClassEnable: setWeekendClassEnable
}
}
Lingue
Nativamente supporta il formato date italiano (dd/MM/yyyy) e inglese (MM/dd/yyyy), l'italiano è il default. Le lingue si possono estendere aggiungendole alla variabile supportedLanguages
aggiungendo gli eventi di apertura tramite selettorehtml
richiamando il metodo openPopup sull'evento focus
Selettore
L'esempio seguente mostra come usare il Date Picker In Vanilla JS e HTML.
Si parte costruendo l'oggetto e poi settando le opzioni.
HTML: Demo HTML
<input class="sgart-date-picker-ctrl" type="text" value="14/01/2022">
<input class="sgart-date-picker-ctrl" type="text" value="21/02/2022">
<script type="text/javascript" src="sgart-date-picker.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
var cal = new SgartDatePicker();
// volendo si puà aggiungere una classe custom
cal.setCustomClass('mia-classe');
// settare la lingua tramite codice o LCID
cal.setLanguage(1033); // en-US , 1040=it-IT
// cal.setLanguage('en-Us'); // en-US, it-IT
// distinguere visivamente i weekend
cal.setWeekendClassEnable(true);
// infine aggiungere l'evento focus tramite selettore
cal.addEvent(".sgart-date-picker-ctrl");
});
</script>
Demo Vanilla JS
Data 1:
Data 2:
Evento focus
Con un framework MVVM come Knockout JS si può usare l'evento focus per attivare l'apertura del Date Picker tramite il metodo openPopup come in questo esempio
HTML
<div>
<!-- notare l'evento focus event: { focus: handleFocus } -->
Data da: <input data-bind="value: myDateFrom, event: { focus: handleFocus }, visible: showDateFrom">
<input type="checkbox" data-bind="checked: showDateFrom">
[ <span data-bind="text: myDateFrom">0</span> ]
|
Data a: <input data-bind="value: myDateTo, event: { focus: handleFocus }, visible: showDateTo">
<input type="checkbox" data-bind="checked: showDateTo">
[ <span data-bind="text: myDateTo">0</span> ]
</div>
<script type="text/javascript" src="sgart-date-picker.js"></script>
<script>
// Modello Knockout
function SgartDatePickerViewModel() {
var self = this;
// inizializzo il calendario senza l'uso di .addEvent()
var cal = new SgartDatePicker();
cal.setWeekendClassEnable(true);
// variabili per visualizzare o meno le input
self.showDateFrom = ko.observable(true);
self.showDateTo = ko.observable(true);
// valore dei campi data in formato stringa
self.myDateFrom = ko.observable("13/01/2022");
self.myDateTo = ko.observable("22/04/2022");
// gestore dell'evento focus che apre il calendatio Date Picker e usa openPopup
self.handleFocus = function(vm, event) {
// richiamo il metodo per aprire il Date Picker
cal.openPopup(event.target, function (eventObj){
if(eventObj!=null && event.target.dataset.bind!= null){
// per impostare il valore devo identificare il controllo attivo
if(event.target.dataset.bind.indexOf("myDateFrom")!==-1)
self.myDateFrom(eventObj.formatted);
else if(event.target.dataset.bind.indexOf("myDateTo")!==-1)
self.myDateTo(eventObj.formatted);
}
});
}
}
document.addEventListener("DOMContentLoaded", function () {
// bindind tra il document e il modello
ko.applyBindings(new SgartDatePickerViewModel());
});
</script>
