Web Toolkit

image/svg+xml GitHub

Datepicker 

<div class="u-margin-all-m">
    <h2>Senza datepicker</h2>
</div>

<div class="u-margin-all-m">

    <form class="Form Form--spaced u-padding-all-xl u-background-grey-10 u-text-r-xs u-layout-prose">
        <fieldset class="Form-fieldset">

            <legend class="Form-legend">Data di nascita</legend>

            <div class="Grid Grid--fit Grid--withGutter">

                <div class="Form-field Form-field--date Grid-cell">
                    <label class="Form-label" for="giorno">Giorno</label>
                    <input class="Form-input u-text-r-s u-borderRadius-m" id="giorno" value="" type="text" pattern="0?[1-9]|1[0-9]|2[0-9]|3[01]" min="1" max="31">
                </div>

                <div class="Form-field Form-field--date Grid-cell">
                    <label class="Form-label" for="mese">Mese</label>
                    <input class="Form-input u-text-r-s u-borderRadius-m" id="mese" value="" type="text" pattern="0?[1-9]|1[012]" min="1" max="12">
                </div>

                <div class="Form-field Form-field--date Grid-cell">
                    <label class="Form-label" for="anno">Anno</label>
                    <input class="Form-input u-text-r-s u-borderRadius-m" id="anno" value="" type="text" pattern="[0-9]{4}" min="1900" max="2010">
                </div>

            </div>

        </fieldset>
    </form>

</div>

<div class="u-margin-all-m">
    <h2>Con datepicker</h2>
</div>

<div class="u-margin-all-m">

    <form class="Form Form--spaced u-padding-all-xl u-background-grey-10 u-text-r-xs u-layout-prose">
        <fieldset class="Form-fieldset">

            <legend class="Form-legend" id="appointment-label">Fissa la data per l'appuntamento</legend>

            <div class="Form-field">

                <label class="Form-label" for="appointment">Data (gg/mm/aaaa)</label>

                <div class="Grid Grid--alignMiddle Grid--fit Grid--withGutter">

                    <div class="Grid-cell u-size10of12">
                        <input class="Form-input u-text-r-s u-borderRadius-m js-Datepicker" type="date" id="appointment" />
                    </div>

                    <div class="Grid-cell u-size2of12">
                        <button type="button" aria-describedby="appointment-label" aria-controls="appointment">
              <span class="u-hiddenVisually">Seleziona la data</span>
              <span class="Icon-calendar u-text-r-l"></span>
            </button>
                    </div>

                </div>
            </div>

        </fieldset>
    </form>

</div>
  • Content: 
    import $ from 'jquery'

const datepickerInit = cb => require(['moment', 'pikaday'], cb)

const dateInputs = $('.js-Datepicker')

if (dateInputs.length > 0) {
  datepickerInit((Moment, Pikaday) => {
    dateInputs.each((i, el) => {
      $(el).attr('type', 'text')
      new Pikaday({
        field: $(el)[0],
        trigger: $(`[aria-controls='${el.id}']`)[0],
        format: 'DD/MM/YYYY',
        i18n: {
          previousMonth: 'Mese precedente',
          nextMonth: 'Mese successivo',
          months: [
            'Gennaio',
            'Febbraio',
            'Marzo',
            'Aprile',
            'Maggio',
            'Giugno',
            'Luglio',
            'Agosto',
            'Settembre',
            'Ottobre',
            'Novembre',
            'Dicembre'
          ],
          weekdays: [
            'Domenica',
            'Lunedì',
            'Martedì',
            'Mercoledì',
            'Giovedì',
            'Venerdì',
            'Sabato'
          ],
          weekdaysShort: ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab']
        }
        // onSelect: () => {
        //   console.log(this.getMoment().format('Do MMMM YYYY'))
        // }
      })
    })
  })
}

export default {
  datepickerInit
}
  • URL: /components/raw/datepicker/index.js
  • Filesystem Path: src/components/datepicker/index.js
  • Size: 1.3 KB

Inserimento di una data

Questa guida spiega brevemente come presentare all’utente dei campi per l’inserimento di una data.

Tre campi di testo

Come regola generale, tre differenti campi di testo di tipo “number” sono il modo più indicato per presentare all’utente una form per l’inserimento di una data.

Trovate un esempio del codice da utilizzare per la creazione della form in questo modulo.

Vale la regola generale per cui è bene non usare javascript per far avanzare l’utente in modo automatico tra un campo e l’altro della form, in quanto renderebbe controintuitiva la navigazione da tastiera.

Datepicker

L’utilizzo del widget datepicker mostrato nell’esempio di questo modulo è consigliato solo nel caso all’utente venga chiesto di inserire una data che sia verosimilmente prossima alla data corrente o quando conoscere il giorno della specifica data possa essere utile.

Come buona regola è consigliato l’utilizzo di un bottone esterno al campo di input per triggerare il datepicker. Questo permette di evitare l’apertura del widget al focus sul campo e l’eventuale utilizzo di widget nativi per il campo di tipo data sui device mobile.

Un caso d’uso per il datepicker, quando si sta chiedendo di decidere una data per fissare un appuntamento. Sconsigliato invece l’utilizzo del datepicker se si sta chiedendo all’utente di inserire una data di nascita o una data che segna qualche evento memorabile (ad esempio data di matrimonio o acquisto immobile). In questi casi sono consigliati i tre campi separati di cui al primo esempio.