Input Initially Empty ?

[costalfy]

Hi, i would like to reproduce this example http://www.daterangepicker.com/#example5 Is it possible with your lib? When i set autoUpdateInput: false my input field always remains empty no matter what selection is made

[kopax-polyconseil]

You need to add this:

class PcDateRangeField {

    static DATE_RANGE_SELECTOR = '.pc-date-range-field'
    static DATE_FORMAT = 'DD/MM/YYYY'
    static LOCALE_WEEK_LABEL = 'W'
    static LOCALE_DAY_OF_THE_WEEK =  ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa']
    static LOCALE_MONTH_NAMES = ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Aout', 'Sep', 'Oct', 'Nov', 'Déc']
    static LOCALE_FIRST_DAY = 1
    static LOCALE_APPLY_LABEL = 'Appliquer'
    static LOCALE_CANCEL_LABEL = 'Réinitialiser'
    static LOCALE_SEPARATOR = ' - '

    state = []

    get $$dateRange() {
        return document.querySelectorAll(PcDateRangeField.DATE_RANGE_SELECTOR)
    }

    get locale() {
        return {
            format: PcDateRangeField.DATE_FORMAT,
            daysOfWeek: PcDateRangeField.LOCALE_DAY_OF_THE_WEEK,
            monthNames: PcDateRangeField.LOCALE_MONTH_NAMES,
            firstDay: PcDateRangeField.LOCALE_FIRST_DAY,
            applyLabel: PcDateRangeField.LOCALE_APPLY_LABEL,
            cancelLabel: PcDateRangeField.LOCALE_CANCEL_LABEL,
            separator: PcDateRangeField.LOCALE_SEPARATOR,
        }
    }

    bindEvents = () => {
        const options = {
            autoUpdateInput: false,
            locale: this.locale,
            maxDate: new Date(),
            autoApply: false,
            alwaysShowCalendars: true,
        }

        this.$$dateRange.forEach(($dateRange) => {
            this.state.push(new DateRangePicker($dateRange, options))
        })

        addEventListener('apply.daterangepicker', this.#applyDaterangePicker)
        addEventListener('cancel.daterangepicker', this.#cancelDaterangePicker)
    }

    unbindEvents = () => {
        this.state.forEach(($dateRange) => {
            $dateRange.remove()
        })
        this.state = []

        removeEventListener('apply.daterangepicker', this.#applyDaterangePicker)
        removeEventListener('cancel.daterangepicker', this.#cancelDaterangePicker)
    }

    #applyDaterangePicker(event) {
        const detail = event.detail
        detail.element.value =
            `${detail.startDate.format(PcDateRangeField.DATE_FORMAT)}${PcDateRangeField.LOCALE_SEPARATOR}${detail.endDate.format(PcDateRangeField.DATE_FORMAT)}`
    }

    #cancelDaterangePicker(event) {
      event.detail.element.value = ''
    }
}

I think this will help you.