Skip to content

Commit 331bf40

Browse files
mrholekmrholek
committed
feat(DatePicker, DateRangePicker): add previewDateOnHover option to enable or disable live preview of dates in input fields when hovering over calendar cells
1 parent 45bcf12 commit 331bf40

File tree

6 files changed

+139
-16
lines changed

6 files changed

+139
-16
lines changed

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,23 @@ Add the `data-coreui-input-read-only="true"` boolean attribute to prevent modifi
174174
</div>
175175
{{< /example >}}
176176

177+
## Preview date on hover
178+
179+
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"`.
180+
181+
{{< example stackblitz_pro="true" >}}
182+
<div class="row">
183+
<div class="col-sm-6 col-lg-5 mb-3 mb-sm-0">
184+
<label class="form-label">With preview (default)</label>
185+
<div data-coreui-locale="en-US" data-coreui-toggle="date-picker"></div>
186+
</div>
187+
<div class="col-sm-6 col-lg-5">
188+
<label class="form-label">Without preview</label>
189+
<div data-coreui-locale="en-US" data-coreui-preview-date-on-hover="false" data-coreui-toggle="date-picker"></div>
190+
</div>
191+
</div>
192+
{{< /example >}}
193+
177194
## Disabled dates
178195

179196
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 => {
383400
| `minDate` | date, number, string, null | `null` | Min selectable date. |
384401
| `name` | string, null | `null` | Set the name attribute for the input element. |
385402
| `placeholder` | string | `'Select time'` | Specifies a short hint that is visible in the input. |
403+
| `previewDateOnHover` | boolean | `true` | Enable live preview of dates in input field when hovering over calendar cells. |
386404
| `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. |
387405
| `selectionType` | `'day'`, `'week'`, `'month'`, `'year'` | `day` | Specify the type of date selection as day, week, month, or year. |
388406
| `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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -204,6 +204,30 @@ Add the `data-coreui-input-read-only="true"` boolean attribute to prevent modifi
204204
</div>
205205
{{< /example >}}
206206

207+
## Preview date on hover
208+
209+
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"`.
210+
211+
{{< example stackblitz_pro="true" >}}
212+
<div class="row">
213+
<div class="col-sm-6 mb-3 mb-sm-0">
214+
<label class="form-label">With preview (default)</label>
215+
<div
216+
data-coreui-locale="en-US"
217+
data-coreui-toggle="date-range-picker">
218+
</div>
219+
</div>
220+
<div class="col-sm-6">
221+
<label class="form-label">Without preview</label>
222+
<div
223+
data-coreui-locale="en-US"
224+
data-coreui-preview-date-on-hover="false"
225+
data-coreui-toggle="date-range-picker">
226+
</div>
227+
</div>
228+
</div>
229+
{{< /example >}}
230+
207231
## Disabled dates
208232

209233
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 =>
428452
| `maxDate` | date, number, string, null | `null` | Max selectable date. |
429453
| `minDate` | date, number, string, null | `null` | Min selectable date. |
430454
| `placeholder` | string | `['Start date', 'End date']` | Specifies a short hint that is visible in the input. |
455+
| `previewDateOnHover` | boolean | `true` | Enable live preview of dates in input fields when hovering over calendar cells. |
431456
| `ranges` | object | `{}` | Predefined date ranges the user can select from. |
432457
| `rangesButtonsClasses` | array, string | `['btn', 'btn-ghost-secondary']` | CSS class names that will be added to ranges buttons |
433458
| `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

Lines changed: 11 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/src/date-range-picker.js

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,7 @@ const Default = {
102102
minDate: null,
103103
name: null,
104104
placeholder: ['Start date', 'End date'],
105+
previewDateOnHover: true,
105106
range: true,
106107
ranges: {},
107108
rangesButtonsClasses: ['btn', 'btn-ghost-secondary'],
@@ -153,6 +154,7 @@ const DefaultType = {
153154
minDate: '(date|number|string|null)',
154155
name: '(string|null)',
155156
placeholder: '(array|string)',
157+
previewDateOnHover: 'boolean',
156158
range: 'boolean',
157159
ranges: 'object',
158160
rangesButtonsClasses: '(array|string)',
@@ -426,14 +428,16 @@ class DateRangePicker extends BaseComponent {
426428
}
427429
})
428430

429-
EventHandler.on(calendar, 'cellHover.coreui.calendar', event => {
430-
if (this._selectEndDate) {
431-
this._endInput.value = event.date ? this._setInputValue(event.date) : this._setInputValue(this._endDate)
432-
return
433-
}
431+
if (this._config.previewDateOnHover) {
432+
EventHandler.on(calendar, 'cellHover.coreui.calendar', event => {
433+
if (this._selectEndDate) {
434+
this._endInput.value = event.date ? this._setInputValue(event.date) : this._setInputValue(this._endDate)
435+
return
436+
}
434437

435-
this._startInput.value = event.date ? this._setInputValue(event.date) : this._setInputValue(this._startDate)
436-
})
438+
this._startInput.value = event.date ? this._setInputValue(event.date) : this._setInputValue(this._startDate)
439+
})
440+
}
437441

438442
EventHandler.on(calendar, 'selectEndChange.coreui.calendar', event => {
439443
this._selectEndDate = event.value

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

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,11 +65,13 @@ describe('DatePicker', () => {
6565
const div = fixtureEl.querySelector('div')
6666
const datePicker = new DatePicker(div, {
6767
locale: 'fr-FR',
68-
date: new Date(2023, 0, 15)
68+
date: new Date(2023, 0, 15),
69+
previewDateOnHover: false
6970
})
7071

7172
expect(datePicker._config.locale).toEqual('fr-FR')
7273
expect(datePicker._config.date).toEqual(new Date(2023, 0, 15))
74+
expect(datePicker._config.previewDateOnHover).toEqual(false)
7375
})
7476

7577
it('should create proper DOM structure', () => {
@@ -294,6 +296,40 @@ describe('DatePicker', () => {
294296
})
295297
})
296298

299+
describe('previewDateOnHover', () => {
300+
it('should be enabled by default', () => {
301+
fixtureEl.innerHTML = '<div></div>'
302+
const div = fixtureEl.querySelector('div')
303+
const datePicker = new DatePicker(div)
304+
305+
expect(datePicker._config.previewDateOnHover).toBe(true)
306+
})
307+
308+
it('should be configurable', () => {
309+
fixtureEl.innerHTML = '<div></div>'
310+
const div = fixtureEl.querySelector('div')
311+
const datePicker = new DatePicker(div, {
312+
previewDateOnHover: false
313+
})
314+
315+
expect(datePicker._config.previewDateOnHover).toBe(false)
316+
})
317+
318+
it('should update configuration with previewDateOnHover option', () => {
319+
fixtureEl.innerHTML = '<div></div>'
320+
const div = fixtureEl.querySelector('div')
321+
const datePicker = new DatePicker(div, {
322+
previewDateOnHover: true
323+
})
324+
325+
datePicker.update({
326+
previewDateOnHover: false
327+
})
328+
329+
expect(datePicker._config.previewDateOnHover).toBe(false)
330+
})
331+
})
332+
297333
describe('dispose', () => {
298334
it('should dispose DatePicker instance', () => {
299335
fixtureEl.innerHTML = '<div></div>'

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

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,12 +65,14 @@ describe('DateRangePicker', () => {
6565
const dateRangePicker = new DateRangePicker(div, {
6666
locale: 'fr-FR',
6767
startDate: new Date(2023, 0, 1),
68-
endDate: new Date(2023, 0, 15)
68+
endDate: new Date(2023, 0, 15),
69+
previewDateOnHover: false
6970
})
7071

7172
expect(dateRangePicker._config.locale).toEqual('fr-FR')
7273
expect(dateRangePicker._config.startDate).toEqual(new Date(2023, 0, 1))
7374
expect(dateRangePicker._config.endDate).toEqual(new Date(2023, 0, 15))
75+
expect(dateRangePicker._config.previewDateOnHover).toEqual(false)
7476
})
7577

7678
it('should create proper DOM structure', () => {
@@ -496,6 +498,40 @@ describe('DateRangePicker', () => {
496498
})
497499
})
498500

501+
describe('previewDateOnHover', () => {
502+
it('should be enabled by default', () => {
503+
fixtureEl.innerHTML = '<div></div>'
504+
const div = fixtureEl.querySelector('div')
505+
const dateRangePicker = new DateRangePicker(div)
506+
507+
expect(dateRangePicker._config.previewDateOnHover).toBe(true)
508+
})
509+
510+
it('should be configurable', () => {
511+
fixtureEl.innerHTML = '<div></div>'
512+
const div = fixtureEl.querySelector('div')
513+
const dateRangePicker = new DateRangePicker(div, {
514+
previewDateOnHover: false
515+
})
516+
517+
expect(dateRangePicker._config.previewDateOnHover).toBe(false)
518+
})
519+
520+
it('should update configuration with previewDateOnHover option', () => {
521+
fixtureEl.innerHTML = '<div></div>'
522+
const div = fixtureEl.querySelector('div')
523+
const dateRangePicker = new DateRangePicker(div, {
524+
previewDateOnHover: true
525+
})
526+
527+
dateRangePicker.update({
528+
previewDateOnHover: false
529+
})
530+
531+
expect(dateRangePicker._config.previewDateOnHover).toBe(false)
532+
})
533+
})
534+
499535
describe('data-api', () => {
500536
it('should initialize date range picker on data-api elements', () => {
501537
fixtureEl.innerHTML = '<div data-coreui-toggle="date-range-picker"></div>'

0 commit comments

Comments
 (0)