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 edee716..5e0fc61 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 @@ -40,10 +40,24 @@ } .calendar-header { - display: flex; + display: grid; + grid-template-columns: repeat(3, 1fr); align-items: center; } + .view-days .calendar-header { + grid-template-columns: 1fr 5fr 1fr; + } + + .view-years .calendar-header { + grid-template-columns: 1fr 3fr 1fr; + } + + .view-months .calendar-cell, + .view-years .calendar-cell { + padding: 6px 20px; + } + .calendar-cell { padding: 5px 10px; line-height: 1.5; @@ -151,42 +165,63 @@ } .datepicker-wrapper { - display: inline-block; position: relative; - margin-bottom: 8px; + display: inline-flex; + } + + .datepicker-input { + padding: 5px; + height: 22px; + box-sizing: border-box; + border: 1px solid #ccc; + border-right-width: 0; + background: #fff; + font-size: 12px; } - .datepicker-input { - width: 200px; - padding: 8px 36px 8px 8px; - border-radius: 5px; - border: 1px solid #ccc; - background: #fafafa; - cursor: pointer; - font-size: 16px; + .datepicker-input::placeholder { + color: #909fa7; + } + + .datepicker-input:focus { + border-color: #66afe9; + outline: 0; } .datepicker-icon { - position: absolute; - right: 8px; - top: 50%; - transform: translateY(-50%); - width: 20px; - height: 20px; - fill: #888; + display: inline-flex; + align-items: center; + font-size: 13.5px; + + padding: 0 10px; + box-sizing: border-box; + height: 22px; + background: #fff; + border: 1px solid #ccc; + border-bottom-right-radius: 5px; + border-top-right-radius: 5px; + cursor: pointer; - pointer-events: auto; + } + + .datepicker-icon:active, + .datepicker-icon:hover, + .datepicker-icon:focus { + background-color: #e6e6e6; + border-color: #cbcbcb; + } + + .datepicker-icon:active:focus { + background-color: #d4d4d4; + border-color: #aaaaaa; }
- - - - + +
@@ -256,6 +291,9 @@ }, 0); } function hideCalendar() { + // Ripristina la classe view-days quando si chiude il calendario + calendarPopup.classList.remove('view-months', 'view-years'); + calendarPopup.classList.add('view-days'); calendarPopup.style.display = 'none'; document.removeEventListener('mousedown', onClickOutside); // Resetta la vista alla schermata principale @@ -274,7 +312,16 @@ // --- SOVRASCRIVI RENDERING --- function renderCalendar() { - calendarPopup.innerHTML = `
`; + // Gestione classi view-* su calendarPopup + calendarPopup.classList.remove('view-days', 'view-months', 'view-years'); + if (view === 'days') calendarPopup.classList.add('view-days'); + else if (view === 'months') calendarPopup.classList.add('view-months'); + else if (view === 'years') calendarPopup.classList.add('view-years'); + let calendarGridClass = 'calendar-grid'; + if (view === 'days') calendarGridClass += ' calendar-days'; + else if (view === 'months') calendarGridClass += ' calendar-months'; + else if (view === 'years') calendarGridClass += ' calendar-years'; + calendarPopup.innerHTML = `
`; calendarEl = document.getElementById("calendar"); monthYearEl = document.getElementById("monthYear"); if (view === 'days') renderDays(); @@ -500,7 +547,7 @@ // Inizializza input (opzionale: mostra la data di oggi) dateInput.value = selectedDate ? formatDate(selectedDate, dateFormat) : ''; // Eventi su input e icona - document.getElementById('dateInput').addEventListener('click', showCalendar); + document.getElementById('calendarIcon').addEventListener('click', showCalendar); // Permetti inserimento manuale della data document.getElementById('dateInput').addEventListener('input', function (e) {