diff --git a/src/widgetfideuram/components/nbp-fid-calendar-generic/nbp-fid-calendar-generic-page.html b/src/widgetfideuram/components/nbp-fid-calendar-generic/nbp-fid-calendar-generic-page.html index 1e9de41..4a6050a 100644 --- a/src/widgetfideuram/components/nbp-fid-calendar-generic/nbp-fid-calendar-generic-page.html +++ b/src/widgetfideuram/components/nbp-fid-calendar-generic/nbp-fid-calendar-generic-page.html @@ -17,7 +17,26 @@ border: 1px solid #ccc; border-radius: 10px; padding: 15px; - /* width: 320px; */ + color: #333333; + } + + .calendar-popup { + position: absolute; + z-index: 100; + display: none; + + min-width: 160px; + padding: 5px 0; + margin: 2px 0 0; + list-style: none; + font-size: 12px; + text-align: left; + background-color: #ffffff; + border: 1px solid #e1e1e1; + border-radius: 0; + -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); + background-clip: padding-box; } .calendar-header { @@ -26,48 +45,11 @@ margin-bottom: 10px; } - .calendar-header button { - background: none; - font-size: 20px; - - border-color: #eaeaea; - border-radius: 3px; - font-size: 12px; - -webkit-appearance: none; - outline: none !important; - -webkit-transition: all 0.1s; - -o-transition: all 0.1s; - transition: all 0.1s; + .calendar-cell { padding: 5px 10px; - font-size: 11px; - line-height: 1.5; - border-radius: 0; - color: #333333; - background-color: #ffffff; - border-color: #eaeaea; - display: inline-block; - margin-bottom: 0; - font-weight: normal; - text-align: center; - vertical-align: middle; - touch-action: manipulation; - cursor: pointer; - background-image: none; - border: 1px solid transparent; - white-space: nowrap; - padding: 6px 20px; font-size: 12px; - line-height: 1.52857143; - border-radius: 0; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - } - - #prevBtn, - #nextBtn, - #monthYear { + border: 1px solid #dde6e9; + border-radius: 3px; cursor: pointer; } @@ -92,12 +74,6 @@ grid-template-columns: repeat(5, 1fr); } - .calendar-grid div { - padding: 8px; - border-radius: 5px; - cursor: pointer; - } - .calendar-grid .day { font-weight: bold; background-color: #eee; @@ -133,12 +109,7 @@ border-radius: 4px; cursor: pointer; } - - - - - + - .calendar-popup { - position: absolute; - z-index: 100; - display: none; + - min-width: 160px; - padding: 5px 0; - margin: 2px 0 0; - list-style: none; - font-size: 12px; - text-align: left; - background-color: #ffffff; - border: 1px solid #e1e1e1; - border-radius: 0; - -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); - box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); - background-clip: padding-box; - } +
- + @@ -279,7 +238,7 @@ // --- SOVRASCRIVI RENDERING --- function renderCalendar() { - calendarPopup.innerHTML = `
`; + calendarPopup.innerHTML = `
`; calendarEl = document.getElementById("calendar"); monthYearEl = document.getElementById("monthYear"); if (view === 'days') renderDays(); @@ -316,6 +275,7 @@ for (let day of daysOfWeek) { const div = document.createElement("div"); div.classList.add("day"); + div.classList.add("calendar-cell"); div.textContent = day; calendarEl.appendChild(div); } @@ -335,6 +295,8 @@ const div = document.createElement("div"); div.textContent = pad(day); div.classList.add("other-month"); + div.classList.add("calendar-cell"); + const prevMonthDate = new Date(year, month - 1, day); if (isDateDisabled(prevMonthDate)) { div.classList.add("disabled"); @@ -353,6 +315,7 @@ for (let i = 1; i <= daysInCurrentMonth; i++) { const div = document.createElement("div"); div.textContent = pad(i); + div.classList.add("calendar-cell"); const thisDate = new Date(year, month, i); if (selectedDate && sameDate(selectedDate, thisDate)) div.classList.add("selected"); if (isDateDisabled(thisDate)) { @@ -375,6 +338,7 @@ const div = document.createElement("div"); div.textContent = pad(i); div.classList.add("other-month"); + div.classList.add("calendar-cell"); const nextMonthDate = new Date(year, month + 1, i); if (isDateDisabled(nextMonthDate)) { div.classList.add("disabled"); @@ -396,6 +360,7 @@ months.forEach((m, idx) => { const div = document.createElement("div"); div.textContent = m; + div.classList.add("calendar-cell"); div.onclick = () => { currentDate.setMonth(idx); view = 'days'; @@ -414,6 +379,7 @@ for (let y = base; y < base + 20; y++) { const div = document.createElement("div"); div.textContent = y; + div.classList.add("calendar-cell"); if (y === currentDate.getFullYear()) div.classList.add("selected"); div.onclick = () => { currentDate.setFullYear(y); @@ -472,6 +438,30 @@ dateInput.value = selectedDate ? formatDate(selectedDate, dateFormat) : ''; // Eventi su input e icona document.getElementById('dateInput').addEventListener('click', showCalendar); + + // Permetti inserimento manuale della data + document.getElementById('dateInput').addEventListener('input', function (e) { + const value = e.target.value; + // Regex base per dd/MM/yyyy + const datePattern = /^(\d{2})\/(\d{2})\/(\d{4})$/; + if (datePattern.test(value)) { + const [, dd, mm, yyyy] = value.match(datePattern); + const date = new Date(parseInt(yyyy), parseInt(mm) - 1, parseInt(dd)); + // Controlla che sia una data valida + if (date && date.getDate() === parseInt(dd) && (date.getMonth() + 1) === parseInt(mm) && date.getFullYear() === parseInt(yyyy)) { + if (!isDateDisabled(date)) { + selectedDate = date; + currentDate = new Date(date); + dateInput.value = formatDate(selectedDate, dateFormat); + dateInput.classList.remove('input-error'); + renderCalendar(); + return; + } + } + } + // Se non valido, evidenzia errore + dateInput.classList.add('input-error'); + }); document.getElementById('calendarIcon').addEventListener('click', showCalendar); // Espone showCalendar globalmente solo se serve (compatibilità) window.showCalendar = showCalendar;