Skip to main content
logo regione lombardia

Bootstrap Regione Lombardia

Versione di Bootstrap Italia per la Regione Lombardia per lo sviluppo di applicazioni web per la PA

Calendario

La componente Calendario può assolvere diverse funzioni all’interno di un’interfaccia: nella sua forma più semplice di data picker è spesso impiegato all’interno di processi di inserimento dati, oppure all’interno di una form.
In altre forme più complesse può assolvere una funzione comunicativa e ricoprire una posizione di maggiore visibilità.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div class="row mt-5 mt-md-0">
  <div class="col-md-4 col-xl-3">
    <div class="form-group">
      <label class="active" for="data_nascita">Data di nascita</label>
      <input type="date" id="data_nascita"/>
    </div>
  </div>
  <div class="col-md-4 offset-xl-3 col-xl-3">
    <div class="form-group">
      <label class="active" for="data_da">Periodo da</label>
      <input type="date" id="data_da"/>
    </div>
  </div>
  <div class="col-md-4 col-xl-3">
    <div class="form-group">
      <label class="active" for="data_a">a</label>
      <input type="date" id="data_a"/>
    </div>
  </div>
</div>

Calendario avanzato

Calendario selezione singola.
Calendario selezione periodo.
Calendario selezione multipla. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<div class="bd-example">
  <div class="row">
    <div class="col">
      <div class="form-group" style="margin-bottom:0px">
        <div class="input-group">
          <span class="input-group-text">
            <svg class="icon icon-sm"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-calendar"></use></svg>
          </span>
          <label class="active" for="calendar-single">Data di nascita</label>
          <input type="text" class="form-control" id="calendar-single" name="calendar-single"
                 aria-label="scrivere data." placeholder="gg/mm/aaaa" />
        </div>
        <small id="formGroupExampleInputWithHelpDescription"
        class="form-text ">Calendario selezione singola.</small>
      </div>
    </div>
    <div class="col">
      <div class="form-group" style="margin-bottom:0px">
        <div class="input-group">
          <span class="input-group-text">
            <svg class="icon icon-sm"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-calendar"></use></svg>
          </span>
          <label class="active" for="calendar-range">Periodo da.. a..</label>
          <input type="text" class="form-control" id="calendar-range" name="calendar-range"
                  aria-label="indicare due date separate da 'al'." placeholder="gg/mm/aaaa" />
        </div>
        <small id="formGroupExampleInputWithHelpDescription14" class="form-text">Calendario selezione periodo.</small>
      </div>
    </div>
    <div class="col">
      <div class="form-group" style="margin-bottom:0px">
        <div class="input-group">
          <span class="input-group-text">
            <svg class="icon icon-sm"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-calendar"></use></svg>
          </span>
          <label class="active" for="calendar-multiple">Indicare giorni disponibilità</label>
          <input type="text" class="form-control" id="calendar-multiple" name="calendar-multiple"
                 aria-label="indicare più date separate da una virgola." placeholder="gg/mm/aaaa" />
        </div>
        <small id="formGroupExampleInputWithHelpDescription15" class="form-text">Calendario selezione multipla.</small>
      </div>
    </div>
  </div>
</div>

Questo calendario è un componente implementato in javascript ed il cui codice è importato all’interno di bootstrap-lombardia.min.js.
E’ stata utilizzata la libreria flatpickr la cui documentazione completa è reperibile a questo indirizzo.

Per inizializzare il componente deve essere invocata la funzione seguente, passando come parametro l’elemento cui collegarla:

flatpickr(document.querySelector('#calendar-single'), {
  allowInput: true,
  dateFormat: 'd/m/Y',
  locale: "it"
})

Utilizzare il parametro mode per impostare la selezione multipla o di un range.

flatpickr (document.querySelector('#calendar-multiple'), {
  allowInput: true,
  dateFormat: 'd/m/Y',
  locale: "it",
  mode: 'multiple'
})
flatpickr(document.querySelector('#calendar-range'), {
  allowInput: true,
  dateFormat: 'd/m/Y',
  locale: "it",
  mode: 'range'
})

Accessibilità

Utilizzo del datepicker

Per fare in modo che un form sia compilabile anche da un non vedente, è necessario che le date possano anche essere scritte direttamente via tastiera, e non obbligatoriamente selezionate al calendario.
Inoltre bisogna fare in modo che lo screen reader dia chiare indicazioni per la compilazione, utilizzando in modo combinato label, placehoder e aria-label.