Date field input

Basic 

  •         {% include "@Components/fields/date-field/date-field.twig" with {props: {
  label: "Datum narození",
  name: "date_of_birth",
}} %}

      
  •             <div class="f-date d-flex flex-column gap-1 u-posr --native">

      <label class="f-label d-flex align-items-center mb-0 u-fz-md">
  Datum narození
</label>
  
  <div class="f-date__wrap d-flex align-items-center u-posr">
    <input class="f-base f-date__input flatpicker" type="date" name=date_of_birth>
    <span class="f-date__icon">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --primary">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><g clip-path="url(#clip0_3547_98104)"><path fill="currentColor" d="M14.008 1.226c1.098 0 1.992.894 1.992 1.992v7.36L10.778 16H1.992A1.995 1.995 0 0 1 0 14.008V3.218C0 2.12.894 1.226 1.992 1.226h.583V0h1.532v1.226h7.786V0h1.532v1.226h.583Zm.46 8.276V6.069H1.532v7.939c0 .253.206.46.46.46h7.693v-2.974c0-1.098.894-1.992 1.992-1.992h2.79Zm0-4.966V3.218a.46.46 0 0 0-.46-.46h-.583v1.227h-1.532V2.759H4.107v1.226H2.575V2.759h-.583a.46.46 0 0 0-.46.46v1.317h12.935Zm-3.25 8.797 2.214-2.299h-1.754a.46.46 0 0 0-.46.46v1.84Z"/></g><defs><clipPath id="clip0_3547_98104"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>      </span>
    </span>
  </div>

</div>

Native 

  •         {% include "@Components/fields/date-field/date-field.twig" with {props: {
  label: "Native",
  name: "native",
  native: true,
}} %}

      
  •             <div class="f-date d-flex flex-column gap-1 u-posr --native">

      <label class="f-label d-flex align-items-center mb-0 u-fz-md">
  Native
</label>
  
  <div class="f-date__wrap d-flex align-items-center u-posr">
    <input class="f-base f-date__input" type="date" name=native>
    <span class="f-date__icon">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --primary">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><g clip-path="url(#clip0_3547_98104)"><path fill="currentColor" d="M14.008 1.226c1.098 0 1.992.894 1.992 1.992v7.36L10.778 16H1.992A1.995 1.995 0 0 1 0 14.008V3.218C0 2.12.894 1.226 1.992 1.226h.583V0h1.532v1.226h7.786V0h1.532v1.226h.583Zm.46 8.276V6.069H1.532v7.939c0 .253.206.46.46.46h7.693v-2.974c0-1.098.894-1.992 1.992-1.992h2.79Zm0-4.966V3.218a.46.46 0 0 0-.46-.46h-.583v1.227h-1.532V2.759H4.107v1.226H2.575V2.759h-.583a.46.46 0 0 0-.46.46v1.317h12.935Zm-3.25 8.797 2.214-2.299h-1.754a.46.46 0 0 0-.46.46v1.84Z"/></g><defs><clipPath id="clip0_3547_98104"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>      </span>
    </span>
  </div>

</div>

Range 

  •         {% include "@Components/fields/date-field/date-field.twig" with {props: {
  label: "Range",
  name: "range",
  range: true,
}} %}

      
  •             <div class="f-date d-flex flex-column gap-1 u-posr --native">

      <label class="f-label d-flex align-items-center mb-0 u-fz-md">
  Range
</label>
  
  <div class="f-date__wrap d-flex align-items-center u-posr">
    <input class="f-base f-date__input flatpicker" type="date" data-range name=range>
    <span class="f-date__icon">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --primary">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><g clip-path="url(#clip0_3547_98104)"><path fill="currentColor" d="M14.008 1.226c1.098 0 1.992.894 1.992 1.992v7.36L10.778 16H1.992A1.995 1.995 0 0 1 0 14.008V3.218C0 2.12.894 1.226 1.992 1.226h.583V0h1.532v1.226h7.786V0h1.532v1.226h.583Zm.46 8.276V6.069H1.532v7.939c0 .253.206.46.46.46h7.693v-2.974c0-1.098.894-1.992 1.992-1.992h2.79Zm0-4.966V3.218a.46.46 0 0 0-.46-.46h-.583v1.227h-1.532V2.759H4.107v1.226H2.575V2.759h-.583a.46.46 0 0 0-.46.46v1.317h12.935Zm-3.25 8.797 2.214-2.299h-1.754a.46.46 0 0 0-.46.46v1.84Z"/></g><defs><clipPath id="clip0_3547_98104"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>      </span>
    </span>
  </div>

</div>