Fijn

Datepicker component: Valid With Feedback Message 

<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-valid" placeholder="Datum">
    </div>
    <div class="valid-feedback d-inline-block"><strong>Datepicker is valid</strong></div>
</div>
 
<div class="form-group d-flex flex-wrap">
    <label class="flex-grow-1">{{label}}</label>
    <div class="m-fieldWrap -picker w-100 position-relative{% if disabled %} -disabled{% endif %}">
        {% render '@circle--filled-bg', {icon:"calendar", size:"smallest"}, true %}
        <input type="text" class="js-datepicker cursor-pointer form-control{% if invalid %} is-invalid{% endif %}{% if valid %} is-valid{% endif %}" placeholder="{{label}}"{% if disabled %} value="01-01-2021" disabled{% endif %} {% if min_date_today %}data-min-date="today"{% endif %}>
    </div>
    {% if show_feedback %}<div class="{% if valid %}valid-feedback{% endif %}{% if invalid %}invalid-feedback{% endif %}{% if feedback_message %} d-inline-block{% endif %}"><strong>{{feedback_message}}</strong></div>{% endif %}
</div>
 
{
  "label": "Datum",
  "invalid": false,
  "valid": true,
  "feedback_message": "Datepicker is valid",
  "show_feedback": true,
  "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