Fijn

Timepicker component: Default 

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

        </div>

        <select name="timepickerField" class="form-control cursor-pointer">
            <option>8 : 00</option>
            <option>8 : 30</option>
            <option>9 : 00</option>
            <option>9 : 30</option>
            <option>10 : 00</option>
            <option>10 : 30</option>
            <option>11 : 00</option>
            <option>11 : 30</option>
            <option>12 : 00</option>
            <option>12 : 30</option>
            <option>13 : 00</option>
            <option>13 : 30</option>
            <option>14 : 00</option>
            <option>14 : 30</option>
            <option>15 : 00</option>
            <option>15 : 30</option>
            <option>16 : 00</option>
            <option>16 : 30</option>
            <option>17 : 00</option>
        </select>
    </div>

</div>
 
<div class="form-group d-flex flex-wrap">
    <label class="flex-grow-1">{{label}}</label>
    <div class="m-fieldWrap -picker cursor-pointer w-100 position-relative{% if disabled %} -disabled{% endif %}">
        {% render '@circle--filled-bg', {icon:"time", size:"smallest"}, true %}
        <select name="timepickerField" class="form-control cursor-pointer{% if invalid %} is-invalid{% endif %}{% if valid %} is-valid{% endif %}"{% if disabled %} disabled{% endif %}>
            {% for item in items -%}<option>{{ item }}</option>{% endfor %}
        </select>
    </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": "Tijdstip",
  "items": [
    "8 : 00",
    "8 : 30",
    "9 : 00",
    "9 : 30",
    "10 : 00",
    "10 : 30",
    "11 : 00",
    "11 : 30",
    "12 : 00",
    "12 : 30",
    "13 : 00",
    "13 : 30",
    "14 : 00",
    "14 : 30",
    "15 : 00",
    "15 : 30",
    "16 : 00",
    "16 : 30",
    "17 : 00"
  ],
  "invalid": false,
  "valid": false,
  "feedback_message": "Timepicker is invalid",
  "show_feedback": false,
  "disabled": false
}

Work in progress

Component will change in next sprint according to new MVP design.

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">Tijdstip</label>
    <div class="m-fieldWrap -picker cursor-pointer w-100 position-relative">
        <div class="a-circle -smallest -hover bg-primary -pointer cursor-default" >
<i class="icon-time"></i>

</div>

        <select name="timepickerField" class="form-control cursor-pointer is-invalid">
            <option>8 : 00</option><option>8 : 30</option><option>9 : 00</option><option>9 : 30</option><option>10 : 00</option><option>10 : 30</option><option>11 : 00</option><option>11 : 30</option><option>12 : 00</option><option>12 : 30</option><option>13 : 00</option><option>13 : 30</option><option>14 : 00</option><option>14 : 30</option><option>15 : 00</option><option>15 : 30</option><option>16 : 00</option><option>16 : 30</option><option>17 : 00</option>
        </select>
    </div>
    <div class="invalid-feedback d-inline-block"><strong>Timepicker 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.

This component uses a select field which contains timeblocks of 30 minutes.

This component is stil in progress and could be changed in the future.