Datepicker: populate input with preselected dates on load (#42628)

Fixes #42616

Input and button datepickers are only created on focus/click, so
data-bs-selected-dates never showed up until you interacted with the
field. Only inline datepickers were auto-initialized on load.

Extend the DOMContentLoaded auto-init to also cover any datepicker with
preselected dates so the value renders immediately.

diff --git a/js/src/datepicker.js b/js/src/datepicker.js
index 11085b5c3e1d585bc35909b8f680996908e6789d..e2f668c421ee3efb417a9c8c0ca36b7b5fed0a38 100644 (file)
--- a/js/src/datepicker.js
+++ b/js/src/datepicker.js
@@ -472,9 +472,12 @@ EventHandler.on(document, EVENT_FOCUSIN_DATA_API, SELECTOR_DATA_TOGGLE, function
   Datepicker.getOrCreateInstance(this).show()
 })
 
-// Auto-initialize inline datepickers on DOMContentLoaded
+// Auto-initialize datepickers that need to render on load:
+// - inline datepickers (always visible)
+// - datepickers with preselected dates (so the value populates without focus)
 EventHandler.on(document, `DOMContentLoaded${EVENT_KEY}${DATA_API_KEY}`, () => {
-  for (const element of document.querySelectorAll(`${SELECTOR_DATA_TOGGLE}[data-bs-inline="true"]`)) {
+  const selector = `${SELECTOR_DATA_TOGGLE}[data-bs-inline="true"], ${SELECTOR_DATA_TOGGLE}[data-bs-selected-dates]`
+  for (const element of document.querySelectorAll(selector)) {
     Datepicker.getOrCreateInstance(element)
   }
 })

diff --git a/js/tests/unit/datepicker.spec.js b/js/tests/unit/datepicker.spec.js
index f8efc45fc1b042af67e4c7aa6c3118eb728c2e61..bc8458d1a82c68d4a7bcdd2f698915f57831026f 100644 (file)
--- a/js/tests/unit/datepicker.spec.js
+++ b/js/tests/unit/datepicker.spec.js
@@ -121,6 +121,16 @@ describe('Datepicker', () => {
       expect(datepicker._config.selectionMode).toEqual('multiple')
       expect(datepicker._config.firstWeekday).toEqual(0)
     })
+
+    it('should populate the input value with preselected dates', () => {
+      fixtureEl.innerHTML = '<input type="text" data-bs-toggle="datepicker" data-bs-selection-mode="multiple-ranged" data-bs-selected-dates=\'["2026-06-10", "2026-06-18"]\'>'
+
+      const inputEl = fixtureEl.querySelector('input')
+      const datepicker = new Datepicker(inputEl)
+
+      expect(datepicker._config.selectedDates).toEqual(['2026-06-10', '2026-06-18'])
+      expect(inputEl.value).not.toEqual('')
+    })
   })
 
   describe('show', () => {
@@ -842,6 +852,25 @@ describe('Datepicker', () => {
 
       expect(toggleSpy).not.toHaveBeenCalled()
     })
+
+    it('should auto-initialize datepickers with preselected dates on DOMContentLoaded', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<input type="text" data-bs-toggle="datepicker" data-bs-selection-mode="multiple-ranged" data-bs-selected-dates=\'["2026-06-10", "2026-06-18"]\'>'
+
+        const inputEl = fixtureEl.querySelector('input')
+
+        expect(Datepicker.getInstance(inputEl)).toBeNull()
+
+        const domContentLoadedEvent = createEvent('DOMContentLoaded')
+        document.dispatchEvent(domContentLoadedEvent)
+
+        setTimeout(() => {
+          expect(Datepicker.getInstance(inputEl)).not.toBeNull()
+          expect(inputEl.value).not.toEqual('')
+          resolve()
+        })
+      })
+    })
   })
 
   describe('getInstance', () => {