Missing getShortWeekdays and getShortMonths for date-fns

[fgblomqvist]

I just switched to date-fns and this is what my antd datepicker looks like:

This is what it looked like before the switch (was using Dayjs):

This is how I generate the picker:

import generatePicker from 'antd/es/date-picker/generatePicker';
import dateFnsGenerateConfig from 'rc-picker/lib/generate/dateFns';

export default generatePicker<Date>(dateFnsGenerateConfig);

And here's an example of how I render it:

      <DatePicker.RangePicker
        bordered={false}
        onChange={dates => {
          this.setDates(dates || [null, null]);
        }}
        placeholder={['Start', 'End']}
        value={[minDate, maxDate]}
      />

Looks like the config for date-fns that's generated by rc-picker is missing the methods getShortWeekdays and getShortMonths.

I am using date-fns 2.15.0. I tried both rc-picker 1.15.3 and 2.0.5 but both gave the same (broken) results.

[fgblomqvist]

Related antd bug report:
ant-design/ant-design#26045

[fgblomqvist]

This is the solution I went with:

import generatePicker from 'antd/es/date-picker/generatePicker';
import { enUS } from 'date-fns/locale';
import dateFnsGenerateConfig from 'rc-picker/lib/generate/dateFns';

const locales: Record<string, Locale> = { en_US: enUS };

const originFormat = dateFnsGenerateConfig.locale.format;
Object.assign(dateFnsGenerateConfig.locale, {
  format: (local: string, date: Date, format: string) => {
    if (/\[.+]/.test(format)) {
      const f = format.replace(/[[\]]/g, "'");
      return originFormat(local, date, f);
    }
    return originFormat(local, date, format);
  },

  getShortMonths: (locale: string) => {
    const loc = locales[locale];
    if (!loc || !loc.localize) return [];

    return Array.from(Array(12).keys()).map(i =>
      loc.localize!.month(i, { width: 'abbreviated' }),
    );
  },

  getShortWeekDays: (locale: string) => {
    const loc = locales[locale];
    if (!loc || !loc.localize) return [];

    return Array.from(Array(7).keys()).map(i =>
      loc.localize!.day(i, { width: 'short' }),
    );
  },
});

export default generatePicker<Date>(dateFnsGenerateConfig);

It replicates the Dayjs behavior. That code should be good enough to add to rc-picker I think. The way it would be incorporated is that generatePicker would take a second argument, a map from ISO639-1_ISO3166 (e.g. en_US) to a locale. Any locale you want to support in your app, you will need to import and add to that map (this is to optimize bundle size). Let me know if you'd accept a PR with this.

[fgblomqvist]

lol and all this time there were already two PRs open:
#115
#126
😞

[afc163]

Fixed in #115