DatePicker short day name in wrong order

ricardodolnl commented 2 years ago

🐛 Bug Report

The DatePicke, RangeDatePicker and Calendar have a wrong short day name order when changing to a different locale. In my case Dutch starts its week on a Monday. The calendar week rows dates do start with the date of a Monday but the top row with the short day names does not start with a Monday (but a Sunday). I use momentjs. When I print moment().format('ddd DD') I do see the right short day name.

So to be clear today it's Wednesday 30th of March. When I log this with moment to see the day name I do see Wednesday (in Dutch short: Wo), but in the calendar the day name above the date 30 shows Tuesday (in Dutch short: Di).

To Reproduce

Steps to reproduce the behavior:

import {MomentDateService} from '@ui-kitten/moment';
import {RangeDatepicker} from '@ui-kitten/components';
import moment from 'moment';
import momentLang from 'moment/locale/nl';

moment.updateLocale('nl', momentLang);

<RangeDatepicker
  dateService={dateService}
  range={range}
  onSelect={nextRange => updateRange(nextRange)}
/>

Expected behavior

The top row with short day names starts with the Monday. So in my (Dutch) example it should say Ma instead of Zo.

UI Kitten and Eva version

Package	Version
@eva-design/eva	2.1.0
@ui-kitten/components	5.1.1

richardhaddadau commented 2 years ago

Hi Ricardo,

I'm not sure if this may fix your problem as I can't see your entire code but in the docs for the calendar, it says to specify the dayNames as well as the startDayOfWeek.

const i18n = {
  dayNames: {
    short: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'],
    long: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'],
  },
};

const localeDateService = new NativeDateService('ru', { i18n, startDayOfWeek: 1 });

Perhaps check that out and see. In the sample code above, the array of the day names starts on Sunday so when the startDayOfWeek is set to 1, the calendar shows Monday first.

Does that fix it for you?

richardhaddadau commented 1 year ago

I have the same issue and tried your solution without success @richardhaddadau on latest v4.

Does this work for you Richard?

I will need to test it out again. It did work when I last tried it but will create an app and test it out for you. Give me some time and I'll get back to you ASAP

MDG-RHawkins commented 2 months ago

Just in case anyone comes across this as I did while looking at a similar problem here is my solution.

We are using dayjs as the date localisation plugin so have a custom datePickerService that replicates the example moment based one here https://github.com/akveo/react-native-ui-kitten/blob/master/src/moment/momentDate.service.ts

To align the column headings for days I added this to the getDaysOfWeekNames function:

    // take a copy of the week days to mutate
    const rotatedDays = dayjs.localeData().weekdaysMin().slice(0);

    // set the pivot point, the 'first' day of the week
    const pivot = dayjs.localeData().firstDayOfWeek();

    // splice out the days up to the pivot and push them to the end of the array
    rotatedDays.push(...rotatedDays.splice(0, pivot));

    return rotatedDays;

We support many locales and this works for any day of the week to be the "first" and be read in from the locale config.

I am not sure if the intent of the component is to use the value returned by getFirstDayOfWeek to rearrange the column headers for the days of the week. If it is then this is a bug and we will just remove this workaround if/when it gets patched.

akveo / react-native-ui-kitten