Fijn

Add item component: Datepicker 

<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 class="m-addItem {% if disabled %}-disabled{% endif %} {% if cursor_class %}cursor-pointer{% endif %} -noBox d-flex align-items-center {% if absolute %}absolute cursor-pointer{% else %}position-relative{% endif %} user-select-none">
    {% if datepicker %}
        <div class="js-datepicker position-relative d-flex align-items-center m-addItem__datePicker m-clearHover {% if color %}-{{color}}{% endif %} rounded" data-min-date="today" data-wrap="true">
            {% render '@circle--add-date', {text:text, color:color}, true %}
            <div class="m-clearHover__inputWrap d-inline-flex align-items-center position-relative {% if color %}text-{{color}}{% endif %}">
                <span class="{% if color == 'success' %}d-flex{% else %}d-none{% endif %} align-items-center pl-2 pr-1 cursor-pointer" data-toggle>{% if color == "danger" %}Gisteren{% else %}Vandaag{% endif %}</span>
                <input type="text" readonly class="{% if color == 'success' %}-hide{% endif %} cursor-pointer pl-2" value="20-11-2024" data-input placeholder="{{text}}">
                <span class="pl-2 m-clearHover__datePickerText cursor-pointer" data-toggle>{{text}}</span>
            </div>
            <div class="pl-1 cursor-pointer m-clearHover__cross position-relative" data-clear><i class="icon-cross"></i></div>
        </div>
    {% elif absolute %}
    
        {% render '@circle', {size:"avatar", icon:"plus"}, true %}
        <div class="ml-2">
            <span class="text-muted">Plaats document of</span> <u class="user-select">bladeren</u>
        </div>
    {% elif status_circle %}    
        {% render '@status-circle' %}
        <span class="pl-2 cursor-pointer" data-toggle-prev>{{text}}</span>
    {% else %}       
         {% render '@circle--avatar' %}
        <span class="pl-2 cursor-pointer" data-toggle-prev>{{text}}</span>
    {% endif %}
    
</div>
 
{
  "label": "Maak een nieuw conceptontwerp",
  "show_label": true,
  "show_text": true,
  "invalid": false,
  "valid": false,
  "feedback_message": "Select field is invalid",
  "show_feedback": false,
  "extra_small": false,
  "disabled": false,
  "datepicker": true,
  "color": "",
  "absolute": false,
  "icon": "plus",
  "status_circle": true,
  "cursor_class": false,
  "text": "Deadline toevoegen"
}

Validatie

Wanneer een veld onjuist is ingevuld moet de class .is-invalid of .is-valid toegevoegd worden aan het veld. Wanneer er een error message weergegeven moet worden gebruik dan de volgende html, zie voorbeeld:


<div class="form-group d-flex flex-wrap">
    <label class="flex-grow-1">Maak een nieuw conceptontwerp</label>

    <div class="m-addItem is-invalid rounded cursor-pointer d-flex justify-content-center align-items-center pt-0 pr-2 pb-2 pl-2">
        <div class="d-flex flex-wrap justify-content-center align-items-center">
            <div class="mt-1">
                <div class="a-circle -sm -hover -border -pointer cursor-default" >
<i class="icon-plus"></i>

</div>

            </div>
            
        </div>
    </div>

    <div class="invalid-feedback d-inline-block"><strong>This field is invalid</strong></div>
</div>

Je kunt deze .invalid-feedback of .valid-feedback div al inladen omdat deze standaard wordt verborgen, door de class .d-inline-block toe te voegen wordt deze zichtbaar.