DatePicker: Unable to select time whilest `showTime` and `selectionMode="range"` is used.

### Describe the bug

PrimeVue cannot handle the DatePicker increment/decrement button unless the specific date is selected.

 

### Pull Request Link

_No response_

### Reason for not contributing a PR

- [ ] Lack of time
- [ ] Unsure how to implement the fix/feature
- [ ] Difficulty understanding the codebase
- [ ] Other

### Other Reason

_No response_

### Reproducer

https://stackblitz.com/edit/rt9udosq?file=src%2FApp.vue

### Environment

Default environment.
It happens on all platforms.

### Vue version

^3.2.45

### PrimeVue version

4.4.1

### Node version

_No response_

### Browser(s)

_No response_

### Steps to reproduce the behavior

1. Open the DatePicker popup window.
2. Just click on the time increment button.
3. Errors in console.
```
chunk-WRYKAXUK.js?v=ddcff751:2167 [Vue warn]: Unhandled error during execution of native event handler 
  at <Button class="p-datepicker-increment-button" aria-label="Next Hour" unstyled=undefined  ... > 
  at <BaseTransition onEnter=fn onAfterEnter=fn<bound onOverlayEnterComplete> onAfterLeave=fn<bound onOverlayAfterLeave>  ... > 
  at <Transition name="p-connected-overlay" onEnter=fn onAfterEnter=fn<bound onOverlayEnterComplete>  ... > 
  at <Portal appendTo="body" disabled=false > 
  at <DatePicker showTime="" modelValue=undefined onUpdate:modelValue=fn  ... > 
  at <App>
warn$1 @ chunk-WRYKAXUK.js?v=ddcff751:2167
logError @ chunk-WRYKAXUK.js?v=ddcff751:2379
handleError @ chunk-WRYKAXUK.js?v=ddcff751:2371
callWithErrorHandling @ chunk-WRYKAXUK.js?v=ddcff751:2317
callWithAsyncErrorHandling @ chunk-WRYKAXUK.js?v=ddcff751:2322
invoker @ chunk-WRYKAXUK.js?v=ddcff751:11408
chunk-WRYKAXUK.js?v=ddcff751:2384 Uncaught TypeError: Cannot read properties of undefined (reading '1')
    at Proxy.validateTime (primevue_datepicker.js?v=ae00d42f:3425:30)
    at Proxy.incrementHour (primevue_datepicker.js?v=ae00d42f:3475:16)
    at Proxy.repeat (primevue_datepicker.js?v=ae00d42f:3393:18)
    at Proxy.onTimePickerElementMouseDown (primevue_datepicker.js?v=ae00d42f:3344:14)
    at mergeProps.onMousedown._cache.<computed>._cache.<computed> (primevue_datepicker.js?v=ae00d42f:5478:33)
    at callWithErrorHandling (chunk-WRYKAXUK.js?v=ddcff751:2315:19)
    at callWithAsyncErrorHandling (chunk-WRYKAXUK.js?v=ddcff751:2322:17)
    at HTMLButtonElement.invoker (chunk-WRYKAXUK.js?v=ddcff751:11408:5)
validateTime @ primevue_datepicker.js?v=ae00d42f:3425
incrementHour @ primevue_datepicker.js?v=ae00d42f:3475
repeat @ primevue_datepicker.js?v=ae00d42f:3393
onTimePickerElementMouseDown @ primevue_datepicker.js?v=ae00d42f:3344
mergeProps.onMousedown._cache.<computed>._cache.<computed> @ primevue_datepicker.js?v=ae00d42f:5478
callWithErrorHandling @ chunk-WRYKAXUK.js?v=ddcff751:2315
callWithAsyncErrorHandling @ chunk-WRYKAXUK.js?v=ddcff751:2322
invoker @ chunk-WRYKAXUK.js?v=ddcff751:11408
chunk-WRYKAXUK.js?v=ddcff751:2167 [Vue warn]: Unhandled error during execution of native event handler 
  at <Button class="p-datepicker-increment-button" aria-label="Next Hour" unstyled=undefined  ... > 
  at <BaseTransition onEnter=fn onAfterEnter=fn<bound onOverlayEnterComplete> onAfterLeave=fn<bound onOverlayAfterLeave>  ... > 
  at <Transition name="p-connected-overlay" onEnter=fn onAfterEnter=fn<bound onOverlayEnterComplete>  ... > 
  at <Portal appendTo="body" disabled=false > 
  at <DatePicker showTime="" modelValue=undefined onUpdate:modelValue=fn  ... > 
  at <App>
warn$1 @ chunk-WRYKAXUK.js?v=ddcff751:2167
logError @ chunk-WRYKAXUK.js?v=ddcff751:2379
handleError @ chunk-WRYKAXUK.js?v=ddcff751:2371
callWithErrorHandling @ chunk-WRYKAXUK.js?v=ddcff751:2317
callWithAsyncErrorHandling @ chunk-WRYKAXUK.js?v=ddcff751:2322
invoker @ chunk-WRYKAXUK.js?v=ddcff751:11408
chunk-WRYKAXUK.js?v=ddcff751:2384 Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at Proxy.updateModelTime (primevue_datepicker.js?v=ae00d42f:3533:30)
    at Proxy.onTimePickerElementMouseUp (primevue_datepicker.js?v=ae00d42f:3351:14)
    at mergeProps.onMouseup._cache.<computed>._cache.<computed> (primevue_datepicker.js?v=ae00d42f:5481:33)
    at callWithErrorHandling (chunk-WRYKAXUK.js?v=ddcff751:2315:19)
    at callWithAsyncErrorHandling (chunk-WRYKAXUK.js?v=ddcff751:2322:17)
    at HTMLButtonElement.invoker (chunk-WRYKAXUK.js?v=ddcff751:11408:5)
updateModelTime @ primevue_datepicker.js?v=ae00d42f:3533
onTimePickerElementMouseUp @ primevue_datepicker.js?v=ae00d42f:3351
mergeProps.onMouseup._cache.<computed>._cache.<computed> @ primevue_datepicker.js?v=ae00d42f:5481
callWithErrorHandling @ chunk-WRYKAXUK.js?v=ddcff751:2315
callWithAsyncErrorHandling @ chunk-WRYKAXUK.js?v=ddcff751:2322
invoker @ chunk-WRYKAXUK.js?v=ddcff751:11408

chunk-WRYKAXUK.js?v=ddcff751:2167 [Vue warn]: Unhandled error during execution of native event handler 
  at <Button class="p-datepicker-increment-button" aria-label="Next Hour" unstyled=undefined  ... > 
  at <BaseTransition onEnter=fn onAfterEnter=fn<bound onOverlayEnterComplete> onAfterLeave=fn<bound onOverlayAfterLeave>  ... > 
  at <Transition name="p-connected-overlay" onEnter=fn onAfterEnter=fn<bound onOverlayEnterComplete>  ... > 
  at <Portal appendTo="body" disabled=false > 
  at <DatePicker showTime="" modelValue=undefined onUpdate:modelValue=fn  ... > 
  at <App>
warn$1 @ chunk-WRYKAXUK.js?v=ddcff751:2167
logError @ chunk-WRYKAXUK.js?v=ddcff751:2379
handleError @ chunk-WRYKAXUK.js?v=ddcff751:2371
callWithErrorHandling @ chunk-WRYKAXUK.js?v=ddcff751:2317
callWithAsyncErrorHandling @ chunk-WRYKAXUK.js?v=ddcff751:2322
invoker @ chunk-WRYKAXUK.js?v=ddcff751:11408
chunk-WRYKAXUK.js?v=ddcff751:2384 Uncaught TypeError: Cannot read properties of undefined (reading '1')
    at Proxy.validateTime (primevue_datepicker.js?v=ae00d42f:3425:30)
    at Proxy.incrementHour (primevue_datepicker.js?v=ae00d42f:3475:16)
    at Proxy.repeat (primevue_datepicker.js?v=ae00d42f:3393:18)
    at Proxy.onTimePickerElementMouseDown (primevue_datepicker.js?v=ae00d42f:3344:14)
    at mergeProps.onMousedown._cache.<computed>._cache.<computed> (primevue_datepicker.js?v=ae00d42f:5478:33)
    at callWithErrorHandling (chunk-WRYKAXUK.js?v=ddcff751:2315:19)
    at callWithAsyncErrorHandling (chunk-WRYKAXUK.js?v=ddcff751:2322:17)
    at HTMLButtonElement.invoker (chunk-WRYKAXUK.js?v=ddcff751:11408:5)
validateTime @ primevue_datepicker.js?v=ae00d42f:3425
incrementHour @ primevue_datepicker.js?v=ae00d42f:3475
repeat @ primevue_datepicker.js?v=ae00d42f:3393
onTimePickerElementMouseDown @ primevue_datepicker.js?v=ae00d42f:3344
mergeProps.onMousedown._cache.<computed>._cache.<computed> @ primevue_datepicker.js?v=ae00d42f:5478
callWithErrorHandling @ chunk-WRYKAXUK.js?v=ddcff751:2315
callWithAsyncErrorHandling @ chunk-WRYKAXUK.js?v=ddcff751:2322
invoker @ chunk-WRYKAXUK.js?v=ddcff751:11408
chunk-WRYKAXUK.js?v=ddcff751:2167 [Vue warn]: Unhandled error during execution of native event handler 
  at <Button class="p-datepicker-increment-button" aria-label="Next Hour" unstyled=undefined  ... > 
  at <BaseTransition onEnter=fn onAfterEnter=fn<bound onOverlayEnterComplete> onAfterLeave=fn<bound onOverlayAfterLeave>  ... > 
  at <Transition name="p-connected-overlay" onEnter=fn onAfterEnter=fn<bound onOverlayEnterComplete>  ... > 
  at <Portal appendTo="body" disabled=false > 
  at <DatePicker showTime="" modelValue=undefined onUpdate:modelValue=fn  ... > 
  at <App>
warn$1 @ chunk-WRYKAXUK.js?v=ddcff751:2167
logError @ chunk-WRYKAXUK.js?v=ddcff751:2379
handleError @ chunk-WRYKAXUK.js?v=ddcff751:2371
callWithErrorHandling @ chunk-WRYKAXUK.js?v=ddcff751:2317
callWithAsyncErrorHandling @ chunk-WRYKAXUK.js?v=ddcff751:2322
invoker @ chunk-WRYKAXUK.js?v=ddcff751:11408
chunk-WRYKAXUK.js?v=ddcff751:2384 Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at Proxy.updateModelTime (primevue_datepicker.js?v=ae00d42f:3533:30)
    at Proxy.onTimePickerElementMouseUp (primevue_datepicker.js?v=ae00d42f:3351:14)
    at mergeProps.onMouseup._cache.<computed>._cache.<computed> (primevue_datepicker.js?v=ae00d42f:5481:33)
    at callWithErrorHandling (chunk-WRYKAXUK.js?v=ddcff751:2315:19)
    at callWithAsyncErrorHandling (chunk-WRYKAXUK.js?v=ddcff751:2322:17)
    at HTMLButtonElement.invoker (chunk-WRYKAXUK.js?v=ddcff751:11408:5)
updateModelTime @ primevue_datepicker.js?v=ae00d42f:3533
onTimePickerElementMouseUp @ primevue_datepicker.js?v=ae00d42f:3351
mergeProps.onMouseup._cache.<computed>._cache.<computed> @ primevue_datepicker.js?v=ae00d42f:5481
callWithErrorHandling @ chunk-WRYKAXUK.js?v=ddcff751:2315
callWithAsyncErrorHandling @ chunk-WRYKAXUK.js?v=ddcff751:2322
invoker @ chunk-WRYKAXUK.js?v=ddcff751:11408
```



### Expected behavior

1. No errors are shown, and the time can be decreased/increased.
2. Probably just hide the time selection area before the date is selected.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

DatePicker: Unable to select time whilest `showTime` and `selectionMode="range"` is used. #8197

Describe the bug

Pull Request Link

Reason for not contributing a PR

Other Reason

Reproducer

Environment

Vue version

PrimeVue version

Node version

Browser(s)

Steps to reproduce the behavior

Expected behavior

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

DatePicker: Unable to select time whilest showTime and selectionMode="range" is used. #8197

Description

Describe the bug

Pull Request Link

Reason for not contributing a PR

Other Reason

Reproducer

Environment

Vue version

PrimeVue version

Node version

Browser(s)

Steps to reproduce the behavior

Expected behavior

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

DatePicker: Unable to select time whilest `showTime` and `selectionMode="range"` is used. #8197