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

WIP: missing input style

Browse Source
This commit is contained in:
Alessandro Seravalli 2025-05-09 13:29:54 +02:00
parent ad1bbbe327
commit b1d119fe1c
1 changed files with 111 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,21 +3,27 @@
<head> <head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <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"> <meta charset="UTF-8">
<title>Datepicker Multi-Livello</title> <title>Datepicker Multi-Livello</title>
<style> <style>
body { body {
font-family: sans-serif; font-family: 'Open Sans', Arial, sans-serif;
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 40px; margin-top: 40px;
} }
body * {
font-family: 'Open Sans', Arial, sans-serif;
}
.calendar { .calendar {
border: 1px solid #ccc; font-size: 12px;
border-radius: 10px;
padding: 15px; padding: 15px;
border: 1px solid #e6e6e6;
color: #333333; color: #333333;
background-color: #ffffff;
} }
.calendar-popup { .calendar-popup {
@ -28,12 +34,6 @@
min-width: 160px; min-width: 160px;
padding: 5px 0; padding: 5px 0;
margin: 2px 0 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); -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
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; background-clip: padding-box;
@ -42,15 +42,24 @@
.calendar-header { .calendar-header {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 10px;
} }
.calendar-cell { .calendar-cell {
padding: 5px 10px; padding: 5px 10px;
line-height: 1.5;
font-size: 12px; font-size: 12px;
border: 1px solid #dde6e9; background-color: #ffffff;
border: 1px solid #e6e6e6;
border-radius: 3px; border-radius: 3px;
cursor: pointer; 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 { #monthYear {
@ -61,8 +70,7 @@
.calendar-grid { .calendar-grid {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 5px;
text-align: center; text-align: center;
} }
@ -75,41 +83,73 @@
} }
.calendar-grid .day { .calendar-grid .day {
font-size: 11px;
line-height: 1.5;
font-weight: bold; font-weight: bold;
background-color: #eee;
cursor: default;
} }
.calendar-grid .selected { .calendar-grid .selected {
background-color: #009fe3; background-color: #1797be;
color: white; color: white;
} }
.calendar-grid .selected:hover {
background-color: #137d9f;
border-color: #0e5d76;
}
.calendar-grid .other-month { .calendar-grid .other-month {
color: #ccc; color: #909fa7;
}
.calendar-grid .today {
color: #23b7e5;
}
.calendar-grid:not(:has(.selected)) .today {
background-color: #e6e6e6;
} }
.calendar-grid .disabled { .calendar-grid .disabled {
color: #bbb; color: #989898;
background: #f5f5f5; background-color: #edf1f2;
border-color: #dde6e9;
cursor: not-allowed; cursor: not-allowed;
} }
.calendar-actions { .calendar-actions {
margin-top: 15px; padding: 10px 9px 2px;
display: flex; display: flex;
justify-content: space-around;
} }
.calendar-actions button { .calendar-actions button {
padding: 6px 12px; font-size: 12px;
background-color: orange; padding: 5px 10px;
color: white; line-height: 1.5;
border: none; background-color: #eb690b;
border-radius: 4px; color: #fff;
border: 1px solid #e6e6e6;
border-radius: 3px;
cursor: pointer; 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 { .datepicker-wrapper {
display: inline-block; display: inline-block;
position: relative; position: relative;
@ -141,10 +181,6 @@
</head> </head>
<body> <body>
<style>
</style>
<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="Seleziona una data" />
<svg id="calendarIcon" class="datepicker-icon" viewBox="0 0 24 24"> <svg id="calendarIcon" class="datepicker-icon" viewBox="0 0 24 24">
@ -253,8 +289,10 @@
monthYearEl.onclick = changeView; monthYearEl.onclick = changeView;
} }
// --- LOGICA ORIGINALE (INVARIATA) --- // --- LOGICA MODIFICATA: disabilita tutte le date inferiori al 9/05/2025 ---
function isDateDisabled(date) { 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 // Disabilita per giorno della settimana
if (disabledWeekdays.includes(date.getDay())) return true; if (disabledWeekdays.includes(date.getDay())) return true;
// Disabilita per range // Disabilita per range
@ -266,8 +304,7 @@
function renderDays() { function renderDays() {
calendarEl.classList.add('calendar-grid-7'); calendarEl.classList.add('calendar-grid-7');
const months = ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', const months = ['gennaio', 'febbraio', 'marzo', 'aprile', 'maggio', 'giugno', 'luglio', 'agosto', 'settembre', 'ottobre', 'novembre', 'dicembre'];
'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'];
const daysOfWeek = ['lun', 'mar', 'mer', 'gio', 'ven', 'sab', 'dom']; const daysOfWeek = ['lun', 'mar', 'mer', 'gio', 'ven', 'sab', 'dom'];
monthYearEl.textContent = `${months[currentDate.getMonth()]} ${currentDate.getFullYear()}`; monthYearEl.textContent = `${months[currentDate.getMonth()]} ${currentDate.getFullYear()}`;
@ -275,7 +312,6 @@
for (let day of daysOfWeek) { for (let day of daysOfWeek) {
const div = document.createElement("div"); const div = document.createElement("div");
div.classList.add("day"); div.classList.add("day");
div.classList.add("calendar-cell");
div.textContent = day; div.textContent = day;
calendarEl.appendChild(div); calendarEl.appendChild(div);
} }
@ -318,6 +354,7 @@
div.classList.add("calendar-cell"); div.classList.add("calendar-cell");
const thisDate = new Date(year, month, i); const thisDate = new Date(year, month, i);
if (selectedDate && sameDate(selectedDate, thisDate)) div.classList.add("selected"); if (selectedDate && sameDate(selectedDate, thisDate)) div.classList.add("selected");
if (sameDate(new Date(), thisDate)) div.classList.add("today");
if (isDateDisabled(thisDate)) { if (isDateDisabled(thisDate)) {
div.classList.add("disabled"); div.classList.add("disabled");
} else { } else {
@ -355,17 +392,34 @@
} }
function renderMonths() { function renderMonths() {
const months = ['Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu', 'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic']; const months = ['gennaio', 'febbraio', 'marzo', 'aprile', 'maggio', 'giugno', 'luglio', 'agosto', 'settembre', 'ottobre', 'novembre', 'dicembre'];
monthYearEl.textContent = currentDate.getFullYear(); monthYearEl.textContent = currentDate.getFullYear();
months.forEach((m, idx) => { months.forEach((m, idx) => {
const div = document.createElement("div"); const div = document.createElement("div");
div.textContent = m; div.textContent = m;
div.classList.add("calendar-cell"); 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 = () => { div.onclick = () => {
currentDate.setMonth(idx); currentDate.setMonth(idx);
view = 'days'; view = 'days';
renderCalendar(); renderCalendar();
}; };
}
calendarEl.appendChild(div); calendarEl.appendChild(div);
}); });
} }
@ -380,12 +434,21 @@
const div = document.createElement("div"); const div = document.createElement("div");
div.textContent = y; div.textContent = y;
div.classList.add("calendar-cell"); div.classList.add("calendar-cell");
if (y === currentDate.getFullYear()) div.classList.add("selected"); 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 = () => { div.onclick = () => {
currentDate.setFullYear(y); currentDate.setFullYear(y);
view = 'months'; view = 'months';
renderCalendar(); renderCalendar();
}; };
}
calendarEl.appendChild(div); calendarEl.appendChild(div);
} }
} }
@ -399,14 +462,14 @@
function prev() { function prev() {
if (view === 'days') currentDate.setMonth(currentDate.getMonth() - 1); if (view === 'days') currentDate.setMonth(currentDate.getMonth() - 1);
else if (view === 'months') currentDate.setFullYear(currentDate.getFullYear() - 1); else if (view === 'months') currentDate.setFullYear(currentDate.getFullYear() - 1);
else currentDate.setFullYear(currentDate.getFullYear() - 10); else currentDate.setFullYear(currentDate.getFullYear() - 20);
renderCalendar(); renderCalendar();
} }
function next() { function next() {
if (view === 'days') currentDate.setMonth(currentDate.getMonth() + 1); if (view === 'days') currentDate.setMonth(currentDate.getMonth() + 1);
else if (view === 'months') currentDate.setFullYear(currentDate.getFullYear() + 1); else if (view === 'months') currentDate.setFullYear(currentDate.getFullYear() + 1);
else currentDate.setFullYear(currentDate.getFullYear() + 10); else currentDate.setFullYear(currentDate.getFullYear() + 20);
renderCalendar(); renderCalendar();
} }