{{#if label}}
  <label for={{uid}} onclick={{action "focus"}}>
    {{label}}
  </label>
{{/if}}

<div class="en-daypicker-input-wrapper">
  <input
    readonly
    value={{en-date-format date=date format=format}}
    placeholder={{placeholder}}
    id={{uid}}
    class="en-daypicker-input"
    type="text"
    name="daypicker"
    onfocus={{action "focus"}}
    >

  <div class="en-daypicker-calendar-icon">
    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="12px" height="12px" viewBox="0 0 16 16"><g> <path fill="#69707A" d="M15,2h-2V1c0-0.6-0.4-1-1-1s-1,0.4-1,1v1H9V1c0-0.6-0.4-1-1-1S7,0.4,7,1v1H5V1c0-0.6-0.4-1-1-1S3,0.4,3,1v1 H1C0.4,2,0,2.4,0,3v12c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1V3C16,2.4,15.6,2,15,2z M14,14H2V7h12V14z"></path> </g></svg>
  </div>
</div>

{{#if isFocused}}
  {{en-daypicker
    disableFn=disableFn
    maxDate=maxDate
    minDate=minDate
    on-select=(action "didSelect")
    date=dateFormatted
    }}
{{/if}}