Calendario
Il primo campo richiama un calendario modale, gli altri invece sono legati a due datepicker impostati in modo tale che la seconda data non possa essere inferiore alla prima; nel caso lo sia le due date vengono automaticamente rese identiche all’ultima selezionata.
<div class="form-row mt-5 mt-md-0">
<div class="col-md-4 col-xl-3">
<div class="it-datepicker-wrapper">
<div class="form-group">
<input class="form-control it-date-datepicker" id="data_nascita" type="text" placeholder="gg/mm/aaaa">
<label for="data_nascita">Data di nascita</label>
</div>
</div>
</div>
<div class="col-md-4 offset-xl-3 col-xl-3">
<div class="it-datepicker-wrapper">
<div class="form-group">
<input class="form-control it-date-datepicker" id="data_da" type="text" placeholder="gg/mm/aaaa">
<label for="data_da">Periodo da</label>
</div>
</div>
</div>
<div class="col-md-4 col-xl-3">
<div class="it-datepicker-wrapper">
<div class="form-group">
<input class="form-control it-date-datepicker" id="data_a" type="text" placeholder="gg/mm/aaaa">
<label for="data_a">a</label>
</div>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
$('#data_nascita').datepicker({
inputFormat: ["dd/MM/yyyy"],
outputFormat: 'dd/MM/yyyy',
modal: true,
});
$('#data_da').datepicker({
inputFormat: ["dd/MM/yyyy"],
outputFormat: 'dd/MM/yyyy',
next: '#data_a',
});
$('#data_a').datepicker({
inputFormat: ["dd/MM/yyyy"],
outputFormat: 'dd/MM/yyyy',
previous: '#data_da',
});
})
</script>Nella pagina, oltre al codice HTML, va anche inserito lo script per l’aggancio dei campi al relativo datepiker e la configurazione dello stesso.
Comparsa del datepicker
Per questioni di accessibilità è necessario che la data, oltre che selezionabile dal calendario, possa essere scritta direttamente via tastiera.
Quindi il datepicker deve comparire solo su richiesta, non automaticamente quando il focus si sposta sul campo data da imputare.
Riferimenti
Il contenuto di questa pagina si riferisce ai seguenti punti della Documentazione Tecnica:
Per tutte le possibilità e la configurazione del plugin Javascript del datepicker si vedano:
Versione scura
Si raccomanda di NON UTILIZZARE la versione scura del datepicker.