Date Picker Range: With Error And Helper Light

<div class="date-picker-range--light">
    <div class="date-picker-range__container">

        <div class="text-field--light date-picker--light is-initialized" data-disable-text-field-js data-language="" data-format="" data-min-date="" data-max-date="">
            <div class="text-field__wrapper date-picker__wrapper">
                <input class="text-field__input date-picker__input" id="from" type="text" name="date&#x5B;from&#x5D;" />
                <label class="text-field__label date-picker__label" for="from">From</label>
                <button type="reset" class="date-picker__reset"></button>
            </div>
            <div class="text-field__helper date-picker__helper">
                <div class="text-field__helper--text date-picker__text">Please note that this form field has a helper text</div>
            </div>

            <div class="text-field__error date-picker__error">Please provide a value for this field</div>
        </div>

        <div class="text-field--light date-picker--light is-initialized" data-disable-text-field-js data-language="" data-format="" data-min-date="" data-max-date="">
            <div class="text-field__wrapper date-picker__wrapper">
                <input class="text-field__input date-picker__input" id="to" type="text" name="date&#x5B;to&#x5D;" />
                <label class="text-field__label date-picker__label" for="to">To</label>
                <button type="reset" class="date-picker__reset"></button>
            </div>
            <div class="text-field__helper date-picker__helper">
                <div class="text-field__helper--text date-picker__text">Please note that this form field has a helper text</div>
            </div>

            <div class="text-field__error date-picker__error">Please provide a value for this field</div>
        </div>
    </div>
</div>