Date Picker

<div class="row">
    <div class="col col-12-md-down margin-b-md-down">
        <div class="datepicker">
            <label
                class="mu-icon-angle-down"
                for="start-date"
            >Start Date</label>
            <input
                type="text"
                class="datepicker-field"
                placeholder="YYYY-MM-DD"
                name="start-date"
                id="start-date"
                value="2018-05-01"
                pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))"
                autocomplete="off"
            >
        </div>
    </div>
    <div class="col col-12-md-down">
        <div
            class="datepicker"
            data-bind-min-selector-id="start-date"
            data-pika-add-classnames="position-absolute-md-up"
            data-empty-msg-day="Select a day"
            data-empty-msg-date="No Date Selected"
        >
            <label
                class="mu-icon-angle-down"
                for="end-date"
            >End Date</label>
            <input
                type="text"
                class="datepicker-field"
                placeholder="YYYY-MM-DD"
                name="end-date"
                id="end-date"
                pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))"
                autocomplete="off"
            >
        </div>
    </div>
</div>