Vuepic / vue-datepicker

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

fix: Wrong weekday names when using `format-locale` in overridden timezone #911

Closed basil-gor closed 2 weeks ago

basil-gor commented 3 weeks ago

The same issue we have in https://github.com/Vuepic/vue-datepicker/issues/817, but with days names. In negative timezones, we faced the shift in days. Saturday became the first day of the week.

image

I've added small fix. And also implement some new tests.

I also have an alternative solution without using date-fns format function at all. Will post it bellow, and maybe we can switch to it, because of optimization effort.

basil-gor commented 3 weeks ago

The main idea is just get days and months right from formatLocale this way:

function dayNameFormatLocaleMapper(localizeDay: LocalizeFn<Day>) {
    return (day) => {
        return localizeDay(day - 1, { width: 'short' });
    };
}

Note: I didn't mange typing yet. So it's just example for now

in getDayNames use like:

    // Map day order numbers to names
    const localizeDay = formatLocale?.localize?.day;
    if (localizeDay !== undefined) {
        try {
            days = daysArray.map(dayNameFormatLocaleMapper(localizeDay));
        } catch (e) {
            days = daysArray.map(dayNameIntlMapper(locale));
        }
    } else {
        days = daysArray.map(dayNameIntlMapper(locale));
    }

And same for monht:

    const localizeMonth = formatLocale?.localize?.month;
    if (localizeMonth !== undefined) {
        try {
            const monthLocaleLocalizeFormat = monthFormat === 'long' ? 'wide' : 'abbreviated';
            return months.map((date, i) => {
                const month = localizeMonth(i, { width: monthLocaleLocalizeFormat });
                return {
                    text: month.charAt(0).toUpperCase() + month.substring(1),
                    value: i,
                };
            });
        } catch (e) {
            // Do nothing. Go ahead to execute fallback
        }
    }

This solution could be better, because we don't need to use tz utils and format function at all. Also, it could work a bit faster.

basil-gor commented 3 weeks ago

I also encountered an issue when attempting to fix a problem in this PR. Here is a new report for future https://github.com/Vuepic/vue-datepicker/issues/912