WIP: missing input style
This commit is contained in:
parent
ad1bbbe327
commit
b1d119fe1c
@ -3,21 +3,27 @@
|
||||
|
||||
<head>
|
||||
<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">
|
||||
<title>Datepicker Multi-Livello</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
font-family: 'Open Sans', Arial, sans-serif;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
body * {
|
||||
font-family: 'Open Sans', Arial, sans-serif;
|
||||
}
|
||||
|
||||
.calendar {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 10px;
|
||||
font-size: 12px;
|
||||
padding: 15px;
|
||||
border: 1px solid #e6e6e6;
|
||||
color: #333333;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.calendar-popup {
|
||||
@ -28,12 +34,6 @@
|
||||
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;
|
||||
@ -42,15 +42,24 @@
|
||||
.calendar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.calendar-cell {
|
||||
padding: 5px 10px;
|
||||
line-height: 1.5;
|
||||
font-size: 12px;
|
||||
border: 1px solid #dde6e9;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e6e6e6;
|
||||
border-radius: 3px;
|
||||
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 {
|
||||
@ -61,8 +70,7 @@
|
||||
|
||||
.calendar-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 5px;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -75,41 +83,73 @@
|
||||
}
|
||||
|
||||
.calendar-grid .day {
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
font-weight: bold;
|
||||
background-color: #eee;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.calendar-grid .selected {
|
||||
background-color: #009fe3;
|
||||
background-color: #1797be;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.calendar-grid .selected:hover {
|
||||
background-color: #137d9f;
|
||||
border-color: #0e5d76;
|
||||
}
|
||||
|
||||
.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 {
|
||||
color: #bbb;
|
||||
background: #f5f5f5;
|
||||
color: #989898;
|
||||
background-color: #edf1f2;
|
||||
border-color: #dde6e9;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.calendar-actions {
|
||||
margin-top: 15px;
|
||||
padding: 10px 9px 2px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.calendar-actions button {
|
||||
padding: 6px 12px;
|
||||
background-color: orange;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
padding: 5px 10px;
|
||||
line-height: 1.5;
|
||||
background-color: #eb690b;
|
||||
color: #fff;
|
||||
border: 1px solid #e6e6e6;
|
||||
border-radius: 3px;
|
||||
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 {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
@ -141,10 +181,6 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<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">
|
||||
@ -253,8 +289,10 @@
|
||||
monthYearEl.onclick = changeView;
|
||||
}
|
||||
|
||||
// --- LOGICA ORIGINALE (INVARIATA) ---
|
||||
// --- LOGICA MODIFICATA: disabilita tutte le date inferiori al 9/05/2025 ---
|
||||
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
|
||||
if (disabledWeekdays.includes(date.getDay())) return true;
|
||||
// Disabilita per range
|
||||
@ -266,8 +304,7 @@
|
||||
|
||||
function renderDays() {
|
||||
calendarEl.classList.add('calendar-grid-7');
|
||||
const months = ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno',
|
||||
'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'];
|
||||
const months = ['gennaio', 'febbraio', 'marzo', 'aprile', 'maggio', 'giugno', 'luglio', 'agosto', 'settembre', 'ottobre', 'novembre', 'dicembre'];
|
||||
const daysOfWeek = ['lun', 'mar', 'mer', 'gio', 'ven', 'sab', 'dom'];
|
||||
monthYearEl.textContent = `${months[currentDate.getMonth()]} ${currentDate.getFullYear()}`;
|
||||
|
||||
@ -275,7 +312,6 @@
|
||||
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);
|
||||
}
|
||||
@ -318,6 +354,7 @@
|
||||
div.classList.add("calendar-cell");
|
||||
const thisDate = new Date(year, month, i);
|
||||
if (selectedDate && sameDate(selectedDate, thisDate)) div.classList.add("selected");
|
||||
if (sameDate(new Date(), thisDate)) div.classList.add("today");
|
||||
if (isDateDisabled(thisDate)) {
|
||||
div.classList.add("disabled");
|
||||
} else {
|
||||
@ -355,17 +392,34 @@
|
||||
}
|
||||
|
||||
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();
|
||||
months.forEach((m, idx) => {
|
||||
const div = document.createElement("div");
|
||||
div.textContent = m;
|
||||
div.classList.add("calendar-cell");
|
||||
div.onclick = () => {
|
||||
currentDate.setMonth(idx);
|
||||
view = 'days';
|
||||
renderCalendar();
|
||||
};
|
||||
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 = () => {
|
||||
currentDate.setMonth(idx);
|
||||
view = 'days';
|
||||
renderCalendar();
|
||||
};
|
||||
}
|
||||
calendarEl.appendChild(div);
|
||||
});
|
||||
}
|
||||
@ -380,12 +434,21 @@
|
||||
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);
|
||||
view = 'months';
|
||||
renderCalendar();
|
||||
};
|
||||
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 = () => {
|
||||
currentDate.setFullYear(y);
|
||||
view = 'months';
|
||||
renderCalendar();
|
||||
};
|
||||
}
|
||||
calendarEl.appendChild(div);
|
||||
}
|
||||
}
|
||||
@ -399,14 +462,14 @@
|
||||
function prev() {
|
||||
if (view === 'days') currentDate.setMonth(currentDate.getMonth() - 1);
|
||||
else if (view === 'months') currentDate.setFullYear(currentDate.getFullYear() - 1);
|
||||
else currentDate.setFullYear(currentDate.getFullYear() - 10);
|
||||
else currentDate.setFullYear(currentDate.getFullYear() - 20);
|
||||
renderCalendar();
|
||||
}
|
||||
|
||||
function next() {
|
||||
if (view === 'days') currentDate.setMonth(currentDate.getMonth() + 1);
|
||||
else if (view === 'months') currentDate.setFullYear(currentDate.getFullYear() + 1);
|
||||
else currentDate.setFullYear(currentDate.getFullYear() + 10);
|
||||
else currentDate.setFullYear(currentDate.getFullYear() + 20);
|
||||
renderCalendar();
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user