Datepicker
Per agevolare la selezione di date.
Datepicker
Nella versione precedente del tema il calendario faceva ricorso a un plugin Javascript di terze parti, Accessible Bootstrap Date Picker.
La versione attuale del tema offre con il componente Datepicker un'implementazione nativa delle stesse funzionalità.
Per compatibilità, il componente precedente è comunque ancora disponibile ed utilizzabile anche con questa versione del tema.
<div class="row ml-0 mr-0 p-4">
<div class="form-group">
<label class="active" for="dateStandard">Datepicker</label>
<input type="date" id="dateStandard" name="dateStandard">
</div>
</div>Si tenga presente che la localizzazione dell'interfaccia del calendario - es: label per mesi, giorni etc - avviene a partire dalla lingua in uso sul browser.
Calendario
Il calendario è un componente accessibile basato sul lavoro di Gerard K. Cohen.
Per utilizzarlo occorre sia presente in pagina il relativo codice javascript da collocare a fine pagina, immediatamente prima del tag di chiusura </body> così come il file css specifico, da collocare all'interno del tag <head>
<link rel="stylesheet" href="https://cdn.unito.it/unito-theme/v3/css/calendar.min.css"><script src="https://cdn.unito.it/unito-theme/v3/js/calendar.js" crossorigin="anonymous"></script>Il calendario è generato dal seguente codice html; non sono necessarie chiamate a funzioni javascript al caricamento della pagina.
<section class="Calendar" aria-label="Calendar">
<section aria-label="Controlli Calendario" class="d-flex p-1 u-flex">
<button id="previous" class="Calendar-nav--button" type="button" aria-label="">❮</button>
<div class="flex-fill d-flex justify-content-center">
<div class="Calendar-nav--select">
<select id="month" aria-label="month">
<option>Gennaio</option>
<option>Febbraio</option>
<option>Marzo</option>
<option>Aprile</option>
<option>Maggio</option>
<option>Giugno</option>
<option>Luglio</option>
<option>Agosto</option>
<option>Settembre</option>
<option>Ottobre</option>
<option>Novembre</option>
<option>Dicembre</option>
</select>
</div>
<div class="Calendar-nav--select">
<select id="year" aria-label="year">
<option>2020</option>
<option>2021</option>
<option>2022</option>
<option>2023</option>
<option>2024</option>
<option>2025</option>
</select>
</div>
</div>
<button id="next" class="Calendar-nav--button" type="button" aria-label="">❯</button>
</section>
<div class="Calendar-grid">
<div class="Calendar-help">
<button id="Calendar-help-trigger" class="btn btn-primary w-50 Calendar-help-trigger" aria-label="Scorciatoie da tastiera" aria-haspopup="dialog">Scorciatoie da tastiera</button>
</div>
<div class="Calendar-days d-flex text-center" aria-hidden="true">
<span class="Calendar-item Calendar-item--day">Dom</span>
<span class="Calendar-item Calendar-item--day">Lun</span>
<span class="Calendar-item Calendar-item--day">Mar</span>
<span class="Calendar-item Calendar-item--day">Mer</span>
<span class="Calendar-item Calendar-item--day">Gio</span>
<span class="Calendar-item Calendar-item--day">Ven</span>
<span class="Calendar-item Calendar-item--day">Sab</span>
</div>
<section id="Calendar-dates" aria-label="Calendar dates" role="application"></section>
</div>
<div id="Calendar-help-dialog" class="Calendar-help-dialog d-none" role="dialog" aria-labelledby="Calendar-help-trigger" aria-hidden="true" tabindex="-1">
<p tabindex="-1">Sono disponibili le seguenti scorciatoie da tastiera:</p>
<ul>
<li><kbd>SINISTRA</kbd> / <kbd>DESTRA</kbd> per spostarsi da un giorno all'altro.</li>
<li><kbd>SU</kbd> / <kbd>GIU'</kbd> per spostarsi da una settimana all'altra.</li>
<li><kbd>HOME</kbd> per spostarsi al primo giorno del mese.</li>
<li><kbd>END</kbd> per spostarsi all'ultimo giorno del mese.</li>
<li><kbd>PAGE UP</kbd> per spostarsi allo stesso giorno nel mese precedente.</li>
<li><kbd>PAGE DOWN</kbd> per spostarsi allo stesso giorno nel mese successivo.</li>
<li><kbd>SPAZIO</kbd> per selezionare una data.</li>
</ul>
<button id="Calendar-help-close" class="btn btn-primary" type="button">Chiudi</button>
</div>
<span id="Calendar-updates" class="visually-hidden" aria-live="assertive"></span>
</section>Inibire o evidenziare giorni specifici
All'occorrenza è possibile inibire o evidenziare a calendario giorni specifici.
Per farlo, occorre creare un apposito oggetto javascript "holidays" dove specificare l'anno, mese e data delle giornate da inibire o segnalare a calendario. Collocare l'oggetto prima del codice javascript del calendario.
Si noti che l'indice dei mesi è a base zero, per cui il mese di gennaio corrisponde all'indice zero. Nell'esempio sono presenti il 2/02/2022, il 18/02/2022 ed il 25/02/2022.
La booleana isEnabled definisce se il giorno sia o meno selezionabile a calendario: se true, il giorno viene evidenziato a calendario ma è comunque selezionabile da parte dell'utente. La stringa label permette invece di definire il contenuto del popup visualizzato al passaggio del mouse sopra una di queste giornate.
<script>
const holidays = {
2022: {
0: {
3: {
'label': 'Chiuso',
'isEnabled': true
}
},
11: {
18: {
'label': 'Chiuso',
'isEnabled': false
},
25: {
'label': 'Natale',
'isEnabled': false
}
}
}
};
</script>Intercettare la selezione dell'utente
Se implementata la funzione HandleDate, la data selezionata dall'utente viene passata alla funzione stessa, in formato SQL YYYY-MM-DD
<script>
var HandleDate = function(dt) {
alert("Selezionato: " + dt);
};
</script>