Vuepic / vue-datepicker

Datepicker component for Vue 3
https://vue3datepicker.com
MIT License
1.38k stars 137 forks source link

Unhandled Promise Rejection: Error: You have provided invalid Date format. Please provide a valid JavaScript Date #888

Closed nguyenquocdaile closed 1 month ago

nguyenquocdaile commented 1 month ago

Describe the bug Unhandled Promise Rejection: Error: You have provided invalid Date format. Please provide a valid JavaScript Date

To Reproduce Could you take a look at the screen record

https://github.com/Vuepic/vue-datepicker/assets/12345613/bf004f5a-785b-43c1-83c6-09b7a57f7c06

I implemented a range date picker. When I select another value, it works well. However, only the value (last 12 months and current year) is an error.

<script>
    setup() {
        const { t } = i18n.global;
        const store = useFilterStore();
        const selectedDates = ref([store.filter.fromDate, store.filter.toDate]);

        const presetDates = ref([
            {
                label: t('analytics.dateFilter.today'),
                value: [new Date(), new Date()],
            },
            {
                label: t('analytics.dateFilter.yesterday'),
                value: [sub(new Date(), { days: 1 }), sub(new Date(), { days: 1 })],
            },
            {
                label: t('analytics.dateFilter.last7days'),
                value: [sub(new Date(), { days: 7 }), new Date()],
            },
            {
                label: t('analytics.dateFilter.currentMonth'),
                value: [startOfMonth(new Date()), endOfMonth(new Date())],
            },
            {
                label: t('analytics.dateFilter.previousMonth'),
                value: [
                    startOfMonth(subMonths(new Date(), 1)),
                    endOfMonth(subMonths(new Date(), 1)),
                ],
            },
            {
                label: t('analytics.dateFilter.last3months'),
                value: [sub(new Date(), { months: 3 }), new Date()],
            },
            {
                label: t('analytics.dateFilter.last6months'),
                value: [sub(new Date(), { months: 6 }), new Date()],
            },
            {
                label: t('analytics.dateFilter.last12months'),
                value: [sub(new Date(), { months: 12 }), new Date()],
            },
            {
                label: t('analytics.dateFilter.currentYear'),
                value: [startOfYear(new Date()), endOfYear(new Date())],
            },
        ]);

        watch(selectedDates, (newDates) => {
            store.setDateRange(newDates);
        });

        return {
            selectedDates,
            presetDates,
        };
    },
});
</script>
<template>
    <vue-date-picker
        v-model="selectedDates"
        range
        text-input
        calendar-class-name="dp-custom-calendar"
        placeholder="Select Date"
        format="dd/MM/yyyy"
        :day-names="['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']"
        :six-weeks="true"
        :preset-dates="presetDates"
        :enable-time-picker="false"
    >
    </vue-date-picker>
</template>

Screenshots

image

Desktop & mobile (please complete the following information):

nguyenquocdaile commented 1 month ago

I debugged and saw that the Safari browser doesn't know the date format. I had Z in the last to make UTC format. I hope someone who faces this issue can know that 😊

image