feat: add today btn #486
feat: add today btn #486
Conversation
| if (internalTimeZone.value) { | ||
| // Adjust for the specified time zone | ||
| modelValue.value = fromZonedTime(newDate, internalTimeZone.value); | ||
| } else { | ||
| // No time zone specified, use the new date as is | ||
| modelValue.value = newDate; | ||
| } |
There was a problem hiding this comment.
Wasn't sure about this bit, it seems like it's possible we could run into a null time zone... Is it fine to just use the new Date() value in that case?
| @@ -73,7 +73,7 @@ | |||
| } | |||
|
|
|||
| .c-time-picker__column { | |||
| max-height: 328px; | |||
| max-height: 365px; | |||
There was a problem hiding this comment.
Seems like this is only used for the picker, so figured it would be okay to simply increase this height to deal with the new button. I could also remove showing adjacent months and give the today button negative padding?
There was a problem hiding this comment.
It'll need to be conditional on whether the Today button has been enabled or not. c-datetime-picker should own this CSS though, since the adjustment serves the date picker's needs, not the time picker.
| > | ||
| <template v-slot:actions> | ||
| <v-btn |
There was a problem hiding this comment.
Button should be on the left, away from the "done" button
| @click="setToday" | ||
| :class="showTime ? '' : 'mr-10'" | ||
| > | ||
| Today |
There was a problem hiding this comment.
This needs to be controllable with a prop, and should be false by default
| @@ -75,7 +75,16 @@ | |||
| :min="min ? startOfDay(min) : undefined" | |||
| :max="max ? endOfDay(max) : undefined" | |||
| v-bind="datePickerProps" | |||
| :show-adjacent-months="true" | |||
There was a problem hiding this comment.
Putting this after v-bind=datePickerProps makes it impossible for users to customize it. It can already be customized by users via datePickerProps, so I don't think this should be enabled by default.
| const now = new Date(); | ||
| const today = startOfDay(now); | ||
|
|
||
| // Preserve existing time if it's set | ||
| if (internalValueZoned.value) { | ||
| const existingDate = internalValueZoned.value; | ||
|
|
||
| const newDate = set(today, { | ||
| hours: existingDate.getHours(), | ||
| minutes: existingDate.getMinutes(), | ||
| seconds: existingDate.getSeconds(), | ||
| milliseconds: existingDate.getMilliseconds(), | ||
| }); | ||
|
|
||
| if (internalTimeZone.value) { | ||
| // Adjust for the specified time zone | ||
| modelValue.value = fromZonedTime(newDate, internalTimeZone.value); | ||
| } else { | ||
| // No time zone specified, use the new date as is | ||
| modelValue.value = newDate; | ||
| } | ||
| } else { | ||
| // No existing date/time, just set to start of today | ||
| modelValue.value = today; | ||
| } |
There was a problem hiding this comment.
This implementation:
- Bypasses min/max/allowedDates/step enforcement
- Doesn't bind to
valueOwner(i.e. through:model :forbinding) - Duplicates time preservation logic
Fortunately, its an easy fix:
| const now = new Date(); | |
| const today = startOfDay(now); | |
| // Preserve existing time if it's set | |
| if (internalValueZoned.value) { | |
| const existingDate = internalValueZoned.value; | |
| const newDate = set(today, { | |
| hours: existingDate.getHours(), | |
| minutes: existingDate.getMinutes(), | |
| seconds: existingDate.getSeconds(), | |
| milliseconds: existingDate.getMilliseconds(), | |
| }); | |
| if (internalTimeZone.value) { | |
| // Adjust for the specified time zone | |
| modelValue.value = fromZonedTime(newDate, internalTimeZone.value); | |
| } else { | |
| // No time zone specified, use the new date as is | |
| modelValue.value = newDate; | |
| } | |
| } else { | |
| // No existing date/time, just set to start of today | |
| modelValue.value = today; | |
| } | |
| dateChanged(new Date()) |
| @@ -73,7 +73,7 @@ | |||
| } | |||
|
|
|||
| .c-time-picker__column { | |||
| max-height: 328px; | |||
| max-height: 365px; | |||
There was a problem hiding this comment.
It'll need to be conditional on whether the Today button has been enabled or not. c-datetime-picker should own this CSS though, since the adjustment serves the date picker's needs, not the time picker.
|
|
Description
Questions:
Ensure that your pull request has followed all the steps below: