fixed some issues

mancante la chiusura sull'icona
WIP: missing input style
2025-05-09 16:53:22 +02:00 · 2025-05-09 16:09:27 +02:00 · 2025-05-09 13:29:54 +02:00 · 2025-05-09 10:08:42 +02:00 · 2025-05-09 09:09:35 +02:00 · 2025-05-09 09:03:24 +02:00
1 changed files with 583 additions and 0 deletions
--- 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
@ -0,0 +1,583 @@
+<!DOCTYPE html>
+<html lang="it">
+
+<head>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600&display=swap" rel="stylesheet">
+    <meta charset="UTF-8">
+    <title>Datepicker Multi-Livello</title>
+    <style>
+        body {
+            font-family: 'Open Sans', Arial, sans-serif;
+            display: flex;
+            justify-content: center;
+            margin-top: 40px;
+        }
+
+        body * {
+            font-family: 'Open Sans', Arial, sans-serif;
+        }
+
+        .calendar {
+            font-size: 12px;
+            padding: 15px;
+            border: 1px solid #e6e6e6;
+            color: #333333;
+            background-color: #ffffff;
+        }
+
+        .calendar-popup {
+            position: absolute;
+            z-index: 100;
+            display: none;
+
+            min-width: 160px;
+            padding: 5px 0;
+            margin: 2px 0 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 {
+            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;
+            font-size: 12px;
+            background-color: #ffffff;
+            border: 1px solid #e6e6e6;
+            border-radius: 3px;
+            cursor: pointer;
+
+            -webkit-transition: all 0.1s;
+            -o-transition: all 0.1s;
+            transition: all 0.1s;
+        }
+
+        .calendar-cell:not(.disabled):not(.selected):hover {
+            background-color: #e6e6e6;
+        }
+
+        #monthYear {
+            font-weight: bold;
+            flex-grow: 1;
+            text-align: center;
+        }
+
+        .calendar-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            text-align: center;
+        }
+
+        .calendar-grid-7 {
+            grid-template-columns: repeat(7, 1fr);
+        }
+
+        .calendar-grid-5 {
+            grid-template-columns: repeat(5, 1fr);
+        }
+
+        .calendar-grid .day {
+            font-size: 11px;
+            line-height: 1.5;
+            font-weight: bold;
+        }
+
+        .calendar-grid .selected {
+            background-color: #1797be;
+            color: white;
+        }
+
+        .calendar-grid .selected:hover {
+            background-color: #137d9f;
+            border-color: #0e5d76;
+        }
+
+        .calendar-grid .other-month {
+            color: #909fa7;
+        }
+
+        .calendar-grid .today {
+            color: #23b7e5;
+        }
+
+        .calendar-grid:not(:has(.selected)) .today {
+            background-color: #e6e6e6;
+        }
+
+        .calendar-grid .disabled {
+            color: #989898;
+            background-color: #edf1f2;
+            border-color: #dde6e9;
+            cursor: not-allowed;
+        }
+
+        .calendar-actions {
+            padding: 10px 9px 2px;
+            display: flex;
+        }
+
+        .calendar-actions button {
+            font-size: 12px;
+            padding: 5px 10px;
+            line-height: 1.5;
+            background-color: #eb690b;
+            color: #fff;
+            border: 1px solid #e6e6e6;
+            border-radius: 3px;
+            cursor: pointer;
+        }
+
+        .calendar-actions button#todayBtn {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        .calendar-actions button#clearBtn {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            border-left-width: 0;
+            background-color: #fff;
+            color: #eb690b;
+        }
+
+        .calendar-actions button#confirmBtn {
+            margin-left: auto;
+        }
+
+        .datepicker-wrapper {
+            position: relative;
+            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::placeholder {
+            color: #909fa7;
+        }
+
+        .datepicker-input:focus {
+            border-color: #66afe9;
+            outline: 0;
+        }
+
+        .datepicker-icon {
+            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;
+        }
+        
+        .datepicker-icon:active,
+        .datepicker-icon:hover,
+        .datepicker-icon:focus {
+            background-color: #e6e6e6;
+            border-color: #cbcbcb;
+        }
+
+        .datepicker-icon:hover:active {
+            background-color: #d4d4d4;
+            border-color: #aaaaaa;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="datepicker-wrapper">
+        <input id="dateInput" class="datepicker-input" type="text" placeholder="DD/MM/YYYY" />
+        <i id="calendarIcon" class="datepicker-icon fa fa-calendar"></i>
+        <div class="calendar calendar-popup" id="calendarPopup"></div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            // Utility per posizionare il popup sotto l'input
+            function positionCalendarPopup() {
+                const input = document.getElementById('dateInput');
+                const popup = document.getElementById('calendarPopup');
+                // Sposta il popup in fondo al body (portal)
+                if (popup.parentNode !== document.body) {
+                    document.body.appendChild(popup);
+                }
+                popup.style.display = 'block';
+                popup.style.position = 'absolute';
+                popup.style.zIndex = '9999';
+                const rect = input.getBoundingClientRect();
+                const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+                const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+                popup.style.top = (rect.bottom + scrollTop) + 'px';
+                popup.style.left = (rect.left + scrollLeft) + 'px';
+                // popup.style.minWidth = rect.width + 'px';
+            }
+
+            // --- CONFIGURAZIONE FORMATO DATA ---
+            let dateFormat = 'dd/MM/yyyy'; // Cambia qui il formato come preferisci
+
+            // --- ELEMENTI ---
+            const calendarPopup = document.getElementById("calendarPopup");
+            const dateInput = document.getElementById("dateInput");
+            // Questi saranno definiti dopo il rendering del calendario:
+            let calendarEl, monthYearEl;
+
+            let currentDate = new Date();
+            let selectedDate = null;
+            let view = 'days'; // 'days' | 'months' | 'years'
+
+            // CONFIGURAZIONE: giorni della settimana da disabilitare (0=domenica, 6=sabato)
+            const disabledWeekdays = [0, 6]; // es: weekend
+            // CONFIGURAZIONE: range di date da disabilitare (array di oggetti {start, end})
+            const disabledDateRanges = [
+                { start: new Date(2025, 4, 10), end: new Date(2025, 4, 15) }, // 10-15 maggio 2025
+                // aggiungi altri range se necessario
+            ];
+
+            // --- FORMATTAZIONE DATA ---
+            function pad(n) {
+                return n < 10 ? '0' + n : n;
+            }
+
+            function formatDate(date, format) {
+                if (!date) return '';
+                const pad = n => n < 10 ? '0' + n : n;
+                return format
+                    .replace('dd', pad(date.getDate()))
+                    .replace('MM', pad(date.getMonth() + 1))
+                    .replace('yyyy', date.getFullYear())
+                    .replace('yy', String(date.getFullYear()).slice(-2));
+            }
+
+            // --- MOSTRA/NASCONDI CALENDARIO ---
+            function showCalendar() {
+                positionCalendarPopup();
+                renderCalendar();
+                setTimeout(() => {
+                    document.addEventListener('mousedown', onClickOutside);
+                }, 0);
+            }
+
+            function toggleCalendar() {
+                if (calendarPopup.style.display === 'block') {
+                    hideCalendar();
+                } else {
+                    showCalendar();
+                }
+            }
+
+            function hideCalendar() {
+                calendarPopup.style.display = 'none';
+                document.removeEventListener('mousedown', onClickOutside);
+                
+                if (selectedDate) {
+                    currentDate = new Date(selectedDate);
+                } else {
+                    currentDate = new Date();
+                }
+            }
+            function onClickOutside(e) {
+                if (!calendarPopup.contains(e.target) && e.target !== dateInput && e.target !== document.getElementById('calendarIcon')) {
+                    hideCalendar();
+                }
+            }
+
+            // --- SOVRASCRIVI RENDERING ---
+            function renderCalendar() {
+                // 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');
+                calendarPopup.innerHTML = `<div class='calendar-header'><button id='prevBtn' class="calendar-cell fa fa-chevron-left"></button><div id='monthYear' class="calendar-cell"></div><button id='nextBtn' class="calendar-cell fa fa-chevron-right"></button></div><div class='calendar-grid' id='calendar'></div><div class='calendar-actions'><button id='todayBtn'>Oggi</button><button id='clearBtn'>Cancella</button><button id='confirmBtn'>Conferma</button></div>`;
+                calendarEl = document.getElementById("calendar");
+                monthYearEl = document.getElementById("monthYear");
+                if (view === 'days') renderDays();
+                else if (view === 'months') renderMonths();
+                else renderYears();
+                // Eventi header e azioni
+                document.getElementById('prevBtn').onclick = prev;
+                document.getElementById('nextBtn').onclick = next;
+                document.getElementById('todayBtn').onclick = goToday;
+                document.getElementById('clearBtn').onclick = clearSelection;
+                document.getElementById('confirmBtn').onclick = confirmDate;
+                monthYearEl.onclick = changeView;
+            }
+
+            // --- LOGICA MODIFICATA: disabilita tutte le date inferiori al 9/05/2025 ---
+            function isDateDisabled(date) {
+                const minDate = new Date(2025, 4, 9, 0, 0, 0, 0); // 9 maggio 2025
+                if (date < minDate) return true;
+                // Disabilita per giorno della settimana
+                if (disabledWeekdays.includes(date.getDay())) return true;
+                // Disabilita per range
+                for (const range of disabledDateRanges) {
+                    if (date >= range.start && date <= range.end) return true;
+                }
+                return false;
+            }
+
+            function renderDays() {
+                calendarEl.classList.add('calendar-grid-7');
+                const months = ['gennaio', 'febbraio', 'marzo', 'aprile', 'maggio', 'giugno', 'luglio', 'agosto', 'settembre', 'ottobre', 'novembre', 'dicembre'];
+                const daysOfWeek = ['lun', 'mar', 'mer', 'gio', 'ven', 'sab', 'dom'];
+                monthYearEl.textContent = `${months[currentDate.getMonth()]} ${currentDate.getFullYear()}`;
+
+                // Intestazione dei giorni della settimana
+                for (let day of daysOfWeek) {
+                    const div = document.createElement("div");
+                    div.classList.add("day");
+                    div.textContent = day;
+                    calendarEl.appendChild(div);
+                }
+
+                const year = currentDate.getFullYear();
+                const month = currentDate.getMonth();
+
+                const firstDayOfMonth = new Date(year, month, 1);
+                const startDay = (firstDayOfMonth.getDay() + 6) % 7; // Luned<65>=0, Domenica=6
+
+                const daysInCurrentMonth = new Date(year, month + 1, 0).getDate();
+                const daysInPrevMonth = new Date(year, month, 0).getDate();
+
+                // Giorni del mese precedente
+                for (let i = startDay; i > 0; i--) {
+                    const day = daysInPrevMonth - i + 1;
+                    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");
+                    } else {
+                        div.onclick = () => {
+                            currentDate.setMonth(month - 1);
+                            selectedDate = prevMonthDate;
+                            dateInput.value = formatDate(selectedDate, dateFormat); // aggiorna subito input
+                            renderCalendar();
+                        };
+                    }
+                    calendarEl.appendChild(div);
+                }
+
+                // Giorni del mese corrente
+                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 (sameDate(new Date(), thisDate)) div.classList.add("today");
+                    if (isDateDisabled(thisDate)) {
+                        div.classList.add("disabled");
+                    } else {
+                        div.onclick = () => {
+                            selectedDate = thisDate;
+                            dateInput.value = formatDate(selectedDate, dateFormat); // aggiorna subito input
+                            renderCalendar();
+                        };
+                    }
+                    calendarEl.appendChild(div);
+                }
+
+                // Giorni del mese successivo
+                const totalCells = 42; // 7 giorni x 6 settimane
+                const filledCells = startDay + daysInCurrentMonth;
+                const nextMonthDays = totalCells - filledCells;
+                for (let i = 1; i <= nextMonthDays; i++) {
+                    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");
+                    } else {
+                        div.onclick = () => {
+                            currentDate.setMonth(month + 1);
+                            selectedDate = nextMonthDate;
+                            dateInput.value = formatDate(selectedDate, dateFormat); // aggiorna subito input
+                            renderCalendar();
+                        };
+                    }
+                    calendarEl.appendChild(div);
+                }
+            }
+
+            function renderMonths() {
+                const months = ['gennaio', 'febbraio', 'marzo', 'aprile', 'maggio', 'giugno', 'luglio', 'agosto', 'settembre', 'ottobre', 'novembre', 'dicembre'];
+                monthYearEl.textContent = currentDate.getFullYear();
+                months.forEach((m, idx) => {
+                    const div = document.createElement("div");
+                    div.textContent = m;
+                    div.classList.add("calendar-cell");
+                    const now = new Date();
+                    if (currentDate.getFullYear() === now.getFullYear() && idx === now.getMonth()) {
+                        div.classList.add("today");
+                    }
+                    // Aggiungi la classe 'selected' se il mese corrisponde a selectedDate
+                    if (selectedDate && currentDate.getFullYear() === selectedDate.getFullYear() && idx === selectedDate.getMonth()) {
+                        div.classList.add("selected");
+                    }
+                    // Disabilita mese se tutto il mese è inferiore alla data minima
+                    const minDate = new Date(2025, 4, 9, 0, 0, 0, 0);
+                    const firstDay = new Date(currentDate.getFullYear(), idx, 1);
+                    const lastDay = new Date(currentDate.getFullYear(), idx + 1, 0, 23, 59, 59, 999);
+                    let disableMonth = lastDay < minDate;
+                    if (disableMonth) {
+                        div.classList.add("disabled");
+                    } else {
+                        div.onclick = () => {
+                            currentDate.setMonth(idx);
+                            view = 'days';
+                            renderCalendar();
+                        };
+                    }
+                    calendarEl.appendChild(div);
+                });
+            }
+
+            function renderYears() {
+                calendarEl.classList.remove('calendar-grid-7');
+                calendarEl.classList.add('calendar-grid-5');
+                // 20 anni, 5x4
+                const base = Math.floor(currentDate.getFullYear() / 20) * 20;
+                monthYearEl.textContent = `${base} - ${base + 19}`;
+                for (let y = base; y < base + 20; y++) {
+                    const div = document.createElement("div");
+                    div.textContent = y;
+                    div.classList.add("calendar-cell");
+                    if (y === new Date().getFullYear()) div.classList.add("today");
+                    if (selectedDate && y === selectedDate.getFullYear()) div.classList.add("selected");
+                    // Disabilita anno se tutto l'anno è inferiore alla data minima
+                    const minDate = new Date(2025, 4, 9, 0, 0, 0, 0);
+                    const lastDayOfYear = new Date(y, 11, 31, 23, 59, 59, 999);
+                    let disableYear = lastDayOfYear < minDate;
+                    if (disableYear) {
+                        div.classList.add("disabled");
+                    } else {
+                        div.onclick = () => {
+                            currentDate.setFullYear(y);
+                            view = 'months';
+                            renderCalendar();
+                        };
+                    }
+                    calendarEl.appendChild(div);
+                }
+            }
+
+            function changeView() {
+                if (view === 'days') view = 'months';
+                else if (view === 'months') view = 'years';
+                renderCalendar();
+            }
+
+            function prev() {
+                if (view === 'days') currentDate.setMonth(currentDate.getMonth() - 1);
+                else if (view === 'months') currentDate.setFullYear(currentDate.getFullYear() - 1);
+                else currentDate.setFullYear(currentDate.getFullYear() - 20);
+                renderCalendar();
+            }
+
+            function next() {
+                if (view === 'days') currentDate.setMonth(currentDate.getMonth() + 1);
+                else if (view === 'months') currentDate.setFullYear(currentDate.getFullYear() + 1);
+                else currentDate.setFullYear(currentDate.getFullYear() + 20);
+                renderCalendar();
+            }
+
+            function goToday() {
+                currentDate = new Date();
+                selectedDate = new Date();
+                dateInput.value = formatDate(selectedDate, dateFormat);
+                view = 'days';
+                renderCalendar();
+            }
+
+            function clearSelection() {
+                selectedDate = null;
+                dateInput.value = '';
+                renderCalendar();
+            }
+
+            function confirmDate() {
+                hideCalendar();
+            }
+
+            function sameDate(d1, d2) {
+                return d1.getFullYear() === d2.getFullYear() &&
+                    d1.getMonth() === d2.getMonth() &&
+                    d1.getDate() === d2.getDate();
+            }
+
+            // Inizializza input (opzionale: mostra la data di oggi)
+            dateInput.value = selectedDate ? formatDate(selectedDate, dateFormat) : '';
+            // Eventi su input e icona
+
+            // 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', toggleCalendar);
+            // Espone showCalendar globalmente solo se serve (compatibilità)
+            window.showCalendar = showCalendar;
+        });
+    </script>
+
+</body>
+
+</html>
Author	SHA1	Message	Date
Alessandro Seravalli	c9497e3afc	fixed some issues	2025-05-09 16:53:22 +02:00
Alessandro Seravalli	1c8da26bd8	mancante la chiusura sull'icona	2025-05-09 16:09:27 +02:00
Alessandro Seravalli	b1d119fe1c	WIP: missing input style	2025-05-09 13:29:54 +02:00
Alessandro Seravalli	ad1bbbe327	aggiunte changes	2025-05-09 10:08:42 +02:00
Alessandro Seravalli	ea27f0b91c	rinominato file	2025-05-09 09:09:35 +02:00
Alessandro Seravalli	1d65d5a0cf	aggiunta calendario vanillajs in pagina html	2025-05-09 09:03:24 +02:00