Fijn

Datepicker component: Filter Range 

<div class="form-control -filter d-flex justify-content-between align-items-center w-100 position-relative">
    <i class="icon-calendar text-body mr-2 cursor-pointer"></i>
    <input type="text" class="js-datepickerFrom cursor-pointer" value="" placeholder="Selecteer datum" readonly>
    <input class="js-datepicker flatpickr-input cursor-pointer">
    <span class="ml-2 mr-2 ml-sm-3 mr-sm-3 cursor-default user-select-none">tot</span>
    <input type="text" class="js-datepickerTo cursor-pointer" value="" placeholder="Selecteer datum" readonly>
</div>
 
<div class="form-control -filter d-flex justify-content-between align-items-center w-100 position-relative">
    {% if icon %}<i class="icon-{{icon}} text-body mr-2 cursor-pointer"></i>{% endif %}
    <input type="text" class="js-datepickerFrom cursor-pointer" value="" placeholder="{{label}}" readonly>
    <input class="js-datepicker flatpickr-input cursor-pointer">
    <span class="ml-2 mr-2 ml-sm-3 mr-sm-3 cursor-default user-select-none">tot</span>
    <input type="text" class="js-datepickerTo cursor-pointer" value="" placeholder="{{label}}" readonly>
</div>
 
{
  "label": "Selecteer datum",
  "invalid": false,
  "valid": false,
  "feedback_message": "Datepicker is invalid",
  "show_feedback": false,
  "disabled": false,
  "min_date_today": false,
  "filter": true,
  "range": true,
  "icon": "calendar"
}
  • Handle: @datepicker--filter-range
  • Preview:
  • Filesystem Path: templates/fractal/atoms/datepicker/datepicker--filter.njk

Circle variant (different colors)

  • Default deadline color is white.
  • Deadline color is green when the deadline is today.
  • Deadline color is red when the deadline is passed.

Applying yesterday/today text (circle variant)

Please check if the date selected is either yesterday or today. If this is the case, add class .bg-danger/success to the .a-circle component inside the .m-clearHover div. And add .text-danger/success to the .m-clearHover__inputWrap div. Then apply the desired text to the span inside .m-clearHover__inputWrap (Gisteren or Vandaag). If you want to use the Gisteren or Vandaag text you need to hide the input and show the span. Use .-hide class on the <input> and .d-flex class on the <span>.

Min date

data-min-date="today" will disable all date options before today.

Validation

When a field is incorrectly filled in, the class .is-invalid or .is-valid must be added to the field. When an error message should be displayed, use the following html, see example:

<div class="form-group d-flex flex-wrap">
    <label class="flex-grow-1">Datum</label>
    <div class="m-fieldWrap -picker w-100 position-relative">
        <div class="a-circle -smallest -hover bg-primary -pointer cursor-default" >
<i class="icon-calendar"></i>

</div>

        <input type="text" class="js-datepicker cursor-pointer form-control is-invalid" placeholder="Datum" >
    </div>
    <div class="invalid-feedback d-inline-block"><strong>Datepicker is invalid</strong></div>
</div>

You can already load this .invalid-feedback or .valid-feedback div because it is hidden by default, adding the class .d-inline-block will make it visible.

The datepicker component contains a restricted date range of 5 years, which means that the user can choose a date up to 5 years ago and up to 5 years ahead.

The following javascript library is used for the datepicker component: https://flatpickr.js.org/ https://github.com/flatpickr/flatpickr