aggiunte changes
This commit is contained in:
parent
ea27f0b91c
commit
ad1bbbe327
@ -17,7 +17,26 @@
|
|||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
padding: 15px;
|
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 {
|
.calendar-header {
|
||||||
@ -26,48 +45,11 @@
|
|||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.calendar-header button {
|
.calendar-cell {
|
||||||
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;
|
|
||||||
padding: 5px 10px;
|
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;
|
font-size: 12px;
|
||||||
line-height: 1.52857143;
|
border: 1px solid #dde6e9;
|
||||||
border-radius: 0;
|
border-radius: 3px;
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#prevBtn,
|
|
||||||
#nextBtn,
|
|
||||||
#monthYear {
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -92,12 +74,6 @@
|
|||||||
grid-template-columns: repeat(5, 1fr);
|
grid-template-columns: repeat(5, 1fr);
|
||||||
}
|
}
|
||||||
|
|
||||||
.calendar-grid div {
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-grid .day {
|
.calendar-grid .day {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
background-color: #eee;
|
background-color: #eee;
|
||||||
@ -133,12 +109,7 @@
|
|||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.datepicker-wrapper {
|
.datepicker-wrapper {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -166,28 +137,16 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
}
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
.calendar-popup {
|
<body>
|
||||||
position: absolute;
|
|
||||||
z-index: 100;
|
<style>
|
||||||
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;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
<div class="datepicker-wrapper">
|
<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">
|
<svg id="calendarIcon" class="datepicker-icon" viewBox="0 0 24 24">
|
||||||
<path
|
<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" />
|
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 ---
|
// --- SOVRASCRIVI RENDERING ---
|
||||||
function renderCalendar() {
|
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");
|
calendarEl = document.getElementById("calendar");
|
||||||
monthYearEl = document.getElementById("monthYear");
|
monthYearEl = document.getElementById("monthYear");
|
||||||
if (view === 'days') renderDays();
|
if (view === 'days') renderDays();
|
||||||
@ -316,6 +275,7 @@
|
|||||||
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);
|
||||||
}
|
}
|
||||||
@ -335,6 +295,8 @@
|
|||||||
const div = document.createElement("div");
|
const div = document.createElement("div");
|
||||||
div.textContent = pad(day);
|
div.textContent = pad(day);
|
||||||
div.classList.add("other-month");
|
div.classList.add("other-month");
|
||||||
|
div.classList.add("calendar-cell");
|
||||||
|
|
||||||
const prevMonthDate = new Date(year, month - 1, day);
|
const prevMonthDate = new Date(year, month - 1, day);
|
||||||
if (isDateDisabled(prevMonthDate)) {
|
if (isDateDisabled(prevMonthDate)) {
|
||||||
div.classList.add("disabled");
|
div.classList.add("disabled");
|
||||||
@ -353,6 +315,7 @@
|
|||||||
for (let i = 1; i <= daysInCurrentMonth; i++) {
|
for (let i = 1; i <= daysInCurrentMonth; i++) {
|
||||||
const div = document.createElement("div");
|
const div = document.createElement("div");
|
||||||
div.textContent = pad(i);
|
div.textContent = pad(i);
|
||||||
|
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 (isDateDisabled(thisDate)) {
|
if (isDateDisabled(thisDate)) {
|
||||||
@ -375,6 +338,7 @@
|
|||||||
const div = document.createElement("div");
|
const div = document.createElement("div");
|
||||||
div.textContent = pad(i);
|
div.textContent = pad(i);
|
||||||
div.classList.add("other-month");
|
div.classList.add("other-month");
|
||||||
|
div.classList.add("calendar-cell");
|
||||||
const nextMonthDate = new Date(year, month + 1, i);
|
const nextMonthDate = new Date(year, month + 1, i);
|
||||||
if (isDateDisabled(nextMonthDate)) {
|
if (isDateDisabled(nextMonthDate)) {
|
||||||
div.classList.add("disabled");
|
div.classList.add("disabled");
|
||||||
@ -396,6 +360,7 @@
|
|||||||
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.onclick = () => {
|
div.onclick = () => {
|
||||||
currentDate.setMonth(idx);
|
currentDate.setMonth(idx);
|
||||||
view = 'days';
|
view = 'days';
|
||||||
@ -414,6 +379,7 @@
|
|||||||
for (let y = base; y < base + 20; y++) {
|
for (let y = base; y < base + 20; y++) {
|
||||||
const div = document.createElement("div");
|
const div = document.createElement("div");
|
||||||
div.textContent = y;
|
div.textContent = y;
|
||||||
|
div.classList.add("calendar-cell");
|
||||||
if (y === currentDate.getFullYear()) div.classList.add("selected");
|
if (y === currentDate.getFullYear()) div.classList.add("selected");
|
||||||
div.onclick = () => {
|
div.onclick = () => {
|
||||||
currentDate.setFullYear(y);
|
currentDate.setFullYear(y);
|
||||||
@ -472,6 +438,30 @@
|
|||||||
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('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);
|
document.getElementById('calendarIcon').addEventListener('click', showCalendar);
|
||||||
// Espone showCalendar globalmente solo se serve (compatibilità)
|
// Espone showCalendar globalmente solo se serve (compatibilità)
|
||||||
window.showCalendar = showCalendar;
|
window.showCalendar = showCalendar;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user