{# bulma-calendar (plage Du–Au) + champs cachés reliés au formulaire filtres via l’attribut HTML5 « form ».
   Variables obligatoires : filters_form_id (ex. transaction-list-filters-form), filters.
#}
<input type="hidden" form="{{ filters_form_id }}" name="preset" id="txn-preset-hidden" value="{{ filters.periodSelect }}">
<input type="hidden" form="{{ filters_form_id }}" name="date_from" id="txn-h-date-from"
       value="{{ filters.bookingDateFrom ? filters.bookingDateFrom|date('Y-m-d') : '' }}">
<input type="hidden" form="{{ filters_form_id }}" name="date_to" id="txn-h-date-to"
       value="{{ filters.bookingDateTo ? filters.bookingDateTo|date('Y-m-d') : '' }}">

<div class="viz-filter-group viz-filter-group--date-range viz-period-calendar-slot">
    <span class="viz-filter-label" id="lbl-date-range">Période précise</span>
    <label class="viz-sr-only" for="txn-date-range">Choisir une période du au</label>
    <input type="date"
           form="{{ filters_form_id }}"
           id="txn-date-range"
           class="input txn-date-range-bulma viz-period-date-range-input"
           data-display-mode="default"
           data-color="dark"
           data-is-range="true"
           data-cal-start="{{ filters.bookingDateFrom ? filters.bookingDateFrom|date('Y-m-d') : '' }}"
           data-cal-end="{{ filters.bookingDateTo ? filters.bookingDateTo|date('Y-m-d') : '' }}"
           autocomplete="off"
           aria-labelledby="lbl-date-range">
</div>