date input

dateinput.html

<div class="auth-field ncr-195wnui">
    <div class="scrollable-field-container date-of-birth">
        <div class=" form-input-group"><label for="dateOfBirth" class="form-label default required ncr-udiuai e88h3vw0">Date
            of birth<span class="required" aria-hidden="true"> *</span></label>
            <div class="date-field-container">
                <div class="date-input-wrapper default invalid ncr-q4fnin e88h3vw0">
                    <div class="SingleDatePicker SingleDatePicker_1 SingleDatePicker__block SingleDatePicker__block_2">
                        <div>
                            <div class="SingleDatePickerInput SingleDatePickerInput_1 SingleDatePickerInput__block SingleDatePickerInput__block_2">
                                <div class="DateInput DateInput_1 DateInput__small DateInput__small_2 DateInput__block DateInput__block_3">
                                    <input class="DateInput_input DateInput_input_1 DateInput_input__small DateInput_input__small_2"
                                           aria-label="Date of birth Required" type="text" id="dateOfBirth"
                                           name="dateOfBirth" placeholder="MM/DD/YYYY" autocomplete="off"
                                           aria-describedby="dateOfBirth-field-message-45" value="" maxlength="10"
                                           aria-invalid="true">
                                    <p class="DateInput_screenReaderMessage DateInput_screenReaderMessage_1"
                                       id="DateInput__screen-reader-message-dateOfBirth">Navigate forward to interact
                                        with the calendar and select a date. Press the question mark key to get the
                                        keyboard shortcuts for changing dates.</p></div>
                                <button class="SingleDatePickerInput_calendarIcon SingleDatePickerInput_calendarIcon_1"
                                        type="button" aria-label="Toggle date picker">
                                    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="calendar-alt"
                                         class="svg-inline--fa fa-calendar-alt fa-w-14 " role="img"
                                         xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                                        <path fill="currentColor"
                                              d="M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z"></path>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="dateOfBirth-field-message-45" class="field-error default ncr-mqe676">
                <svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="exclamation-circle"
                     class="svg-inline--fa fa-exclamation-circle fa-w-16 " role="img" xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 512 512" style="margin-right: 5px;">
                    <path fill="currentColor"
                          d="M256 40c118.621 0 216 96.075 216 216 0 119.291-96.61 216-216 216-119.244 0-216-96.562-216-216 0-119.203 96.602-216 216-216m0-32C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm-11.49 120h22.979c6.823 0 12.274 5.682 11.99 12.5l-7 168c-.268 6.428-5.556 11.5-11.99 11.5h-8.979c-6.433 0-11.722-5.073-11.99-11.5l-7-168c-.283-6.818 5.167-12.5 11.99-12.5zM256 340c-15.464 0-28 12.536-28 28s12.536 28 28 28 28-12.536 28-28-12.536-28-28-28z"></path>
                </svg>
                <span class="text ncr-1ibpmnv">Enter your birth date in MM/DD/YYYY format</span></div>
        </div>
    </div>
</div>