Skip to content

Allow preset-dates values to be computed when clicked #1031

Closed
@ayrtonandino

Description

@ayrtonandino

Is your feature request related to a problem? Please describe.
I have users that never close the browser, on mobile and desktop, this is usually not an issue, except when they want to change the date range in the dashboard, using preset-dates defined in VueDatePicker, sometimes when clicking on the "Today" preset doesn't give you "Today", but rather the day the component was mounted, which could be yesterday or a week ago, same with "This Month", it could be the previous month.

Describe the solution you'd like
Change the PresetDate interface to allow the value to be a function, using something like MaybeRefOrGetter:

export type PresetDate = {
    label: string;
    value: MaybeRefOrGetter<Date[] | string[] | Date | string>;
    style?: Record<string, string>;
    slot?: string;
    noTz?: boolean;
    testId?: string;
};

Then in DatepickerMenu wrap preset.value in ​toValue():

<button
    type="button"
    :style="preset.style || {}"
    class="dp__btn dp--preset-range"
    :class="{ 'dp--preset-range-collapsed': collapse }"
    :data-test-id="preset.testId ?? undefined"
    :data-dp-mobile="isMobile"
    @click.prevent="() => presetDate(toValue(preset.value), preset.noTz)"
    @keydown="checkKeyDown($event, () => presetDate(toValue(preset.value), preset.noTz), true)"
>
    {{ preset.label }}
</button>

Also, peerDependencies in package.json should be updated to "vue": ">=3.3.0"

Additional context
From VUEs documentation:
​toValue() Only supported in 3.3+

Normalizes values / refs / getters to values. This is similar to unref(), except that it also normalizes getters. If the argument is a getter, it will be invoked and its return value will be returned.

function toValue<T>(source: T | Ref<T> | (() => T)): T

toValue(1) //       --> 1
toValue(ref(1)) //  --> 1
toValue(() => 1) // --> 1

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions