feat(DatePicker, DateRangePicker): add previewDateOnHover option to enable or disable live preview of dates in input fields when hovering over calendar cells

Author: mrholek

docs/content/forms/date-picker.md

@@ -174,6 +174,23 @@ Add the `data-coreui-input-read-only="true"` boolean attribute to prevent modifi
 </div>
 {{< /example >}}
 
+## Preview date on hover
+
+By default, the date picker shows a live preview in the input field when hovering over calendar dates. To disable this feature, set `data-coreui-preview-date-on-hover="false"`.
+
+{{< example stackblitz_pro="true" >}}
+<div class="row">
+  <div class="col-sm-6 col-lg-5 mb-3 mb-sm-0">
+    <label class="form-label">With preview (default)</label>
+    <div data-coreui-locale="en-US" data-coreui-toggle="date-picker"></div>
+  </div>
+  <div class="col-sm-6 col-lg-5">
+    <label class="form-label">Without preview</label>
+    <div data-coreui-locale="en-US" data-coreui-preview-date-on-hover="false" data-coreui-toggle="date-picker"></div>
+  </div>
+</div>
+{{< /example >}}
+
 ## Disabled dates
 
 The CoreUI Bootstrap DatePicker component allows you to disable certain dates, such as weekends or holidays. You can accomplish this by passing the `disabledDates` option to the component, which determines which dates should be disabled based on custom logic.
@@ -383,6 +400,7 @@ const datePickerList = datePickerElementList.map(datePickerEl => {
 | `minDate` | date, number, string, null | `null` | Min selectable date. |
 | `name` | string, null | `null` | Set the name attribute for the input element. |
 | `placeholder` | string | `'Select time'` | Specifies a short hint that is visible in the input. |
+| `previewDateOnHover` | boolean | `true` | Enable live preview of dates in input field when hovering over calendar cells. |
 | `selectAdjacementDays` | boolean | `false` | Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the `showAdjacementDays` option is set to true. |
 | `selectionType` | `'day'`, `'week'`, `'month'`, `'year'` | `day` | Specify the type of date selection as day, week, month, or year. |
 | `showAdjacementDays` | boolean | `true` | Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month. |

docs/content/forms/date-range-picker.md

@@ -204,6 +204,30 @@ Add the `data-coreui-input-read-only="true"` boolean attribute to prevent modifi
 </div>
 {{< /example >}}
 
+## Preview date on hover
+
+By default, the date range picker shows a live preview in the input fields when hovering over calendar dates. To disable this feature, set `data-coreui-preview-date-on-hover="false"`.
+
+{{< example stackblitz_pro="true" >}}
+  <div class="row">
+    <div class="col-sm-6 mb-3 mb-sm-0">
+      <label class="form-label">With preview (default)</label>
+      <div
+        data-coreui-locale="en-US"
+        data-coreui-toggle="date-range-picker">
+      </div>
+    </div>
+    <div class="col-sm-6">
+      <label class="form-label">Without preview</label>
+      <div
+        data-coreui-locale="en-US"
+        data-coreui-preview-date-on-hover="false"
+        data-coreui-toggle="date-range-picker">
+      </div>
+    </div>
+  </div>
+{{< /example >}}
+
 ## Disabled dates
 
 The CoreUI Bootstrap DateRangePicker component allows you to disable certain dates, such as weekends or holidays. You can accomplish this by passing the `disabledDates` option to the component, which determines which dates should be disabled based on custom logic.
@@ -428,6 +452,7 @@ const dateRangePickerList = dateRangePickerElementList.map(dateRangePickerEl =>
 | `maxDate` | date, number, string, null | `null` | Max selectable date. |
 | `minDate` | date, number, string, null | `null` | Min selectable date. |
 | `placeholder` | string | `['Start date', 'End date']` | Specifies a short hint that is visible in the input. |
+| `previewDateOnHover` | boolean | `true` | Enable live preview of dates in input fields when hovering over calendar cells. |
 | `ranges` | object | `{}` | Predefined date ranges the user can select from. |
 | `rangesButtonsClasses` | array, string | `['btn', 'btn-ghost-secondary']` | CSS class names that will be added to ranges buttons |
 | `selectAdjacementDays` | boolean | `false` | Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the `showAdjacementDays` option is set to true. |

js/dist/date-range-picker.js

@@ -102,6 +102,7 @@ const Default = {
   minDate: null,
   name: null,
   placeholder: ['Start date', 'End date'],
+  previewDateOnHover: true,
   range: true,
   ranges: {},
   rangesButtonsClasses: ['btn', 'btn-ghost-secondary'],
@@ -153,6 +154,7 @@ const DefaultType = {
   minDate: '(date|number|string|null)',
   name: '(string|null)',
   placeholder: '(array|string)',
+  previewDateOnHover: 'boolean',
   range: 'boolean',
   ranges: 'object',
   rangesButtonsClasses: '(array|string)',
@@ -426,14 +428,16 @@ class DateRangePicker extends BaseComponent {
         }
       })
 
-      EventHandler.on(calendar, 'cellHover.coreui.calendar', event => {
-        if (this._selectEndDate) {
-          this._endInput.value = event.date ? this._setInputValue(event.date) : this._setInputValue(this._endDate)
-          return
-        }
+      if (this._config.previewDateOnHover) {
+        EventHandler.on(calendar, 'cellHover.coreui.calendar', event => {
+          if (this._selectEndDate) {
+            this._endInput.value = event.date ? this._setInputValue(event.date) : this._setInputValue(this._endDate)
+            return
+          }
 
-        this._startInput.value = event.date ? this._setInputValue(event.date) : this._setInputValue(this._startDate)
-      })
+          this._startInput.value = event.date ? this._setInputValue(event.date) : this._setInputValue(this._startDate)
+        })
+      }
 
       EventHandler.on(calendar, 'selectEndChange.coreui.calendar', event => {
         this._selectEndDate = event.value

js/src/date-range-picker.js

@@ -65,11 +65,13 @@ describe('DatePicker', () => {
       const div = fixtureEl.querySelector('div')
       const datePicker = new DatePicker(div, {
         locale: 'fr-FR',
-        date: new Date(2023, 0, 15)
+        date: new Date(2023, 0, 15),
+        previewDateOnHover: false
       })
 
       expect(datePicker._config.locale).toEqual('fr-FR')
       expect(datePicker._config.date).toEqual(new Date(2023, 0, 15))
+      expect(datePicker._config.previewDateOnHover).toEqual(false)
     })
 
     it('should create proper DOM structure', () => {
@@ -294,6 +296,40 @@ describe('DatePicker', () => {
     })
   })
 
+  describe('previewDateOnHover', () => {
+    it('should be enabled by default', () => {
+      fixtureEl.innerHTML = '<div></div>'
+      const div = fixtureEl.querySelector('div')
+      const datePicker = new DatePicker(div)
+
+      expect(datePicker._config.previewDateOnHover).toBe(true)
+    })
+
+    it('should be configurable', () => {
+      fixtureEl.innerHTML = '<div></div>'
+      const div = fixtureEl.querySelector('div')
+      const datePicker = new DatePicker(div, {
+        previewDateOnHover: false
+      })
+
+      expect(datePicker._config.previewDateOnHover).toBe(false)
+    })
+
+    it('should update configuration with previewDateOnHover option', () => {
+      fixtureEl.innerHTML = '<div></div>'
+      const div = fixtureEl.querySelector('div')
+      const datePicker = new DatePicker(div, {
+        previewDateOnHover: true
+      })
+
+      datePicker.update({
+        previewDateOnHover: false
+      })
+
+      expect(datePicker._config.previewDateOnHover).toBe(false)
+    })
+  })
+
   describe('dispose', () => {
     it('should dispose DatePicker instance', () => {
       fixtureEl.innerHTML = '<div></div>'

js/tests/unit/date-picker.spec.js

@@ -65,12 +65,14 @@ describe('DateRangePicker', () => {
       const dateRangePicker = new DateRangePicker(div, {
         locale: 'fr-FR',
         startDate: new Date(2023, 0, 1),
-        endDate: new Date(2023, 0, 15)
+        endDate: new Date(2023, 0, 15),
+        previewDateOnHover: false
       })
 
       expect(dateRangePicker._config.locale).toEqual('fr-FR')
       expect(dateRangePicker._config.startDate).toEqual(new Date(2023, 0, 1))
       expect(dateRangePicker._config.endDate).toEqual(new Date(2023, 0, 15))
+      expect(dateRangePicker._config.previewDateOnHover).toEqual(false)
     })
 
     it('should create proper DOM structure', () => {
@@ -496,6 +498,40 @@ describe('DateRangePicker', () => {
     })
   })
 
+  describe('previewDateOnHover', () => {
+    it('should be enabled by default', () => {
+      fixtureEl.innerHTML = '<div></div>'
+      const div = fixtureEl.querySelector('div')
+      const dateRangePicker = new DateRangePicker(div)
+
+      expect(dateRangePicker._config.previewDateOnHover).toBe(true)
+    })
+
+    it('should be configurable', () => {
+      fixtureEl.innerHTML = '<div></div>'
+      const div = fixtureEl.querySelector('div')
+      const dateRangePicker = new DateRangePicker(div, {
+        previewDateOnHover: false
+      })
+
+      expect(dateRangePicker._config.previewDateOnHover).toBe(false)
+    })
+
+    it('should update configuration with previewDateOnHover option', () => {
+      fixtureEl.innerHTML = '<div></div>'
+      const div = fixtureEl.querySelector('div')
+      const dateRangePicker = new DateRangePicker(div, {
+        previewDateOnHover: true
+      })
+
+      dateRangePicker.update({
+        previewDateOnHover: false
+      })
+
+      expect(dateRangePicker._config.previewDateOnHover).toBe(false)
+    })
+  })
+
   describe('data-api', () => {
     it('should initialize date range picker on data-api elements', () => {
       fixtureEl.innerHTML = '<div data-coreui-toggle="date-range-picker"></div>'