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

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

@ -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;
}
</style>
</head>
<body>
<div class="datepicker-wrapper">
<input id="dateInput" class="datepicker-input" type="text" placeholder="Seleziona una data" />
<svg id="calendarIcon" class="datepicker-icon" viewBox="0 0 24 24">
<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>
<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>
@ -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 = `<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");
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) {