PDC/xdce-module-widget-fideuram-v1
16
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mancante la chiusura sull'icona

Browse Source
This commit is contained in:
Alessandro Seravalli 2025-05-09 16:09:27 +02:00
parent b1d119fe1c
commit 1c8da26bd8
1 changed files with 73 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
src/widgetfideuram/components/nbp-fid-calendar-generic/nbp-fid-calendar-generic-page.html
View File

@ -40,10 +40,24 @@
} }
.calendar-header { .calendar-header {
display: flex; display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center; 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 { .calendar-cell {
padding: 5px 10px; padding: 5px 10px;
line-height: 1.5; line-height: 1.5;
@ -151,42 +165,63 @@
} }
.datepicker-wrapper { .datepicker-wrapper {
display: inline-block;
position: relative; position: relative;
margin-bottom: 8px; display: inline-flex;
} }
.datepicker-input { .datepicker-input {
width: 200px; padding: 5px;
padding: 8px 36px 8px 8px; height: 22px;
border-radius: 5px; box-sizing: border-box;
border: 1px solid #ccc; border: 1px solid #ccc;
background: #fafafa; border-right-width: 0;
cursor: pointer; background: #fff;
font-size: 16px; font-size: 12px;
}
.datepicker-input::placeholder {
color: #909fa7;
}
.datepicker-input:focus {
border-color: #66afe9;
outline: 0;
} }
.datepicker-icon { .datepicker-icon {
position: absolute; display: inline-flex;
right: 8px; align-items: center;
top: 50%; font-size: 13.5px;
transform: translateY(-50%);
width: 20px; padding: 0 10px;
height: 20px; box-sizing: border-box;
fill: #888; height: 22px;
background: #fff;
border: 1px solid #ccc;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
cursor: pointer; 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;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="datepicker-wrapper"> <div class="datepicker-wrapper">
<input id="dateInput" class="datepicker-input" type="text" placeholder="Seleziona una data" /> <input id="dateInput" class="datepicker-input" type="text" placeholder="DD/MM/YYYY" />
<svg id="calendarIcon" class="datepicker-icon" viewBox="0 0 24 24"> <i id="calendarIcon" class="datepicker-icon fa fa-calendar"></i>
<path
d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11zm0-13H5V6h14v1z" />
</svg>
<div class="calendar calendar-popup" id="calendarPopup"></div> <div class="calendar calendar-popup" id="calendarPopup"></div>
</div> </div>
@ -256,6 +291,9 @@
}, 0); }, 0);
} }
function hideCalendar() { 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'; calendarPopup.style.display = 'none';
document.removeEventListener('mousedown', onClickOutside); document.removeEventListener('mousedown', onClickOutside);
// Resetta la vista alla schermata principale // Resetta la vista alla schermata principale
@ -274,7 +312,16 @@
// --- SOVRASCRIVI RENDERING --- // --- SOVRASCRIVI RENDERING ---
function renderCalendar() { function renderCalendar() {
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>`; // 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 = `<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='${calendarGridClass}' 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"); calendarEl = document.getElementById("calendar");
monthYearEl = document.getElementById("monthYear"); monthYearEl = document.getElementById("monthYear");
if (view === 'days') renderDays(); if (view === 'days') renderDays();
@ -500,7 +547,7 @@
// Inizializza input (opzionale: mostra la data di oggi) // Inizializza input (opzionale: mostra la data di oggi)
dateInput.value = selectedDate ? formatDate(selectedDate, dateFormat) : ''; dateInput.value = selectedDate ? formatDate(selectedDate, dateFormat) : '';
// Eventi su input e icona // Eventi su input e icona
document.getElementById('dateInput').addEventListener('click', showCalendar); document.getElementById('calendarIcon').addEventListener('click', showCalendar);
// Permetti inserimento manuale della data // Permetti inserimento manuale della data
document.getElementById('dateInput').addEventListener('input', function (e) { document.getElementById('dateInput').addEventListener('input', function (e) {