Open costalfy opened 1 year ago
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.
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