From ad1bbbe327e18269e7fb2f5e28b6b46733e5dfd0 Mon Sep 17 00:00:00 2001
From: Alessandro Seravalli <a.seravalli@armundia.com>
Date: Fri, 9 May 2025 10:08:42 +0200
Subject: [PATCH] aggiunte changes
---
.../nbp-fid-calendar-generic-page.html | 132 ++++++++----------
1 file changed, 61 insertions(+), 71 deletions(-)
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;
}
- </style>
-</head>
-<body>
-
- <style>
.datepicker-wrapper {
display: inline-block;
position: relative;
@@ -166,28 +137,16 @@
cursor: pointer;
pointer-events: auto;
}
+ </style>
+</head>
- .calendar-popup {
- position: absolute;
- z-index: 100;
- display: none;
+<body>
- 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;
- }
+ <style>
+
</style>
<div class="datepicker-wrapper">
- <input id="dateInput" class="datepicker-input" type="text" readonly placeholder="Seleziona una data" />
+ <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" />
@@ -279,7 +238,7 @@
// --- SOVRASCRIVI RENDERING ---
function renderCalendar() {
- calendarPopup.innerHTML = `<div class='calendar-header'><button id='prevBtn' class="fa fa-chevron-left"></button><div id='monthYear'></div><button id='nextBtn' class="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>`;
+ 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();
@@ -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;