Fijn

Datepicker component: Circle 

<div class="form-group -sideBySide mb-1 d-flex align-items-center">
    <label class="mb-0">Deadline</label>
    <div class="m-addItem   -noBox d-flex align-items-center position-relative user-select-none">

        <div class="js-datepicker position-relative d-flex align-items-center m-addItem__datePicker m-clearHover  rounded" data-min-date="today" data-wrap="true">
            <div class="a-circle -avatar -hover -border -pointer cursor-default" data-toggle>
                <i class="icon-plus"></i>

            </div>

            <div class="m-clearHover__inputWrap d-inline-flex align-items-center position-relative ">
                <span class="d-none align-items-center pl-2 pr-1 cursor-pointer" data-toggle>Vandaag</span>
                <input type="text" readonly class=" cursor-pointer pl-2" value="20-11-2024" data-input placeholder="Deadline toevoegen">
                <span class="pl-2 m-clearHover__datePickerText cursor-pointer" data-toggle>Deadline toevoegen</span>
            </div>
            <div class="pl-1 cursor-pointer m-clearHover__cross position-relative" data-clear><i class="icon-cross"></i></div>
        </div>

    </div>
</div>
 
<div class="form-group -sideBySide mb-1 d-flex align-items-center">
    <label class="mb-0{% if info %} d-flex align-items-center{% endif %}">Deadline{% if info %}<div class="d-inline-block ml-2">{% render '@circle--tiny' %}</div>{% endif %}</label>
    {% render '@add-item--no-box', {text:"Deadline toevoegen", datepicker: true, color:color}, true %}
</div>
 
{
  "label": "Datum",
  "invalid": false,
  "valid": false,
  "feedback_message": "Datepicker is invalid",
  "show_feedback": false,
  "disabled": false,
  "min_date_today": false,
  "filter": false,
  "range": false
}

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