Documentazione obsoleta
Questa documentazione non è più mantenuta, ma è stata ripristinata per chi ne avesse ancora bisogno in vecchi progetti.
La versione più attuale di Bootstrap Italia è la versione 2.x, inizia un nuovo progetto sfruttando il codice sorgente aggiornato.
Input Calendario
Documentazione ed esempi per aggiungere calendari per la selezione di giorni dell’anno
Datepicker
Compatibilità con Internet Explorer 11
L’input type=”date” non è supportato da IE11, se ne consiglia l’utilizzo congiuntamente al plugin Just Validate per verificare l’effettiva validità del campo su Internet Explorer.
Clicca sull’icona a destra per visualizzare il datepicker.
<div class="form-group">
<label class="active" for="dateStandard">Datepicker standard</label>
<input type="date" id="dateStandard" name="dateStandard">
</div>Datepicker custom
Il datepicker custom utilizza un plugin Javascript di terze parti, “Accessible Bootstrap Date Picker”. Per maggiori informazioni è possibile consultarne la documentazione completa.
Il componente verrà deprecato nella prossima release di Bootstrap Italia
Il componente datepicker custom presenta alcuni problemi di accessibilità. Non è possibile raggiungere i pulsanti di cambio mese/anno tramite tastiera. Se ne consiglia l’utilizzo nel caso in cui il campo non riguardi ad esempio una data di nascita, o un campo che necessiti la navigazione fra anni.
Abilitazione del Datepicker custom
Per inizializzare il plugin, utilizzare il seguente script:
$(document).ready(function () {
$('.it-date-datepicker').datepicker({
inputFormat: ['dd/MM/yyyy'],
outputFormat: 'dd/MM/yyyy',
})
})
Esempi
Clicca sull’icona per visualizzare il datepicker.
<div class="it-datepicker-wrapper">
<div class="form-group">
<label for="date1">Date label</label>
<input class="form-control it-date-datepicker" id="date1" type="text" placeholder="inserisci la data in formato gg/mm/aaaa">
</div>
</div>Versione scura
Per utilizzare il Datepicker in versione scura, aggiungere la classe .theme-dark al div .it-datepicker-wrapper.
Clicca sull’icona per visualizzare il datepicker.
<div class="it-datepicker-wrapper theme-dark">
<div class="form-group">
<label for="date2">Date label</label>
<input class="form-control it-date-datepicker" id="date2" type="text" placeholder="inserisci la data in formato gg/mm/aaaa">
</div>
</div>