\n *
\n *
\n * {DATEPICKER_FORM_GROUP}\n *
\n *
\n */\nclass VZDatePicker extends VZDateField {\n constructor() {\n super();\n\n this.availableDates = this.getAttribute('data-available-dates')?.split(',') || [];\n this.maxDate = this.getAttribute('data-max-date');\n this.minDate = this.getAttribute('data-min-date');\n this.minDateUnFormatted = new Date(this.minDate);\n this.maxDateUnFormatted = new Date(this.maxDate);\n\n this.now = Date.now();\n this.parentElement.setAttribute('id', `c${this.now}`);\n\n this.createDatePicker = this.createDatePicker.bind(this);\n this.datesDisabled = this.datesDisabled.bind(this);\n this.changeDate = this.changeDate.bind(this);\n this.fixUnavailableDateOnBlur = this.fixUnavailableDateOnBlur.bind(this);\n this.setDatePickerDate = this.setDatePickerDate.bind(this);\n this.setDatePickerDefault = this.setDatePickerDefault.bind(this);\n\n this.datepicker = this.createDatePicker();\n\n this.addEventListener('show', this.constructor.setView);\n this.addEventListener('changeView', this.constructor.setView);\n this.addEventListener('changeDate', this.changeDate);\n this.addEventListener('setDatePickerDate', this.setDatePickerDate);\n\n // Invalid date inputs are ignored, so lets listen for the blur event as well\n this.addEventListener('blur', this.fixUnavailableDateOnBlur);\n\n this.setFieldStatus();\n\n // Enable ASAP option\n this.dataAsapDateAttribute = 'data-asap-date';\n this.datePickerContainer = this.parentElement.closest('.js-datepicker-form');\n this.asapToggle = this.datePickerContainer ? this.datePickerContainer.querySelector('input.js-datepicker-asap') : null;\n\n if (this.asapToggle) {\n this.setDatePickerAsap = this.setDatePickerAsap.bind(this);\n this.asapToggle.addEventListener('change', this.setDatePickerAsap);\n }\n }\n\n /**\n * @private setFieldStatus\n * @description\n * Sets an empty class when the element is empty for styling purposes.\n */\n setFieldStatus() {\n const hasValue = this.value.length > 0;\n\n if (hasValue) {\n this.setAttribute('data-value', this.value);\n this.classList.remove('empty');\n } else {\n this.classList.add('empty');\n }\n }\n\n /**\n * @private datesDisabled\n * @param {Date} date - A date object\n * @returns {boolean} - Whether a date should be disabled\n *\n * @description\n * If availableDates is not empty, disable dates that are not in this array\n */\n datesDisabled(date) {\n // If availableDates is empty, do not disable any dates\n if (!this.availableDates || this.availableDates.length === 0) return false;\n\n let day = date.getDate();\n let month = date.getMonth() + 1; // Month is index based, so we need to do +1\n const year = date.getFullYear();\n day = day < 10 ? `0${day}` : day;\n month = month < 10 ? `0${month}` : month;\n\n // Needs to be mm-dd-yyyy for the disable functionality to work\n const dateString = `${month}-${day}-${year}`;\n\n return !this.availableDates.includes(dateString);\n }\n\n /**\n * @private createDatePicker\n * @returns {HTMLElement} - A datepicker element\n *\n * @description\n * Will instantiate a datepicker for this element\n */\n createDatePicker() {\n const options = {\n autohide: true,\n container: `#c${this.now}`,\n defaultViewDate: this.now,\n datesDisabled: this.datesDisabled,\n format: {\n toValue(date) {\n return Datepicker.parseDate(date, 'dd-mm-yyyy', 'nl');\n },\n toDisplay(date) {\n return Datepicker.formatDate(date, 'dd-mm-yyyy', 'nl');\n }\n },\n language: 'nl',\n maxDate: new Date(this.maxDate),\n minDate: new Date(this.minDate),\n nextArrow: '