如何修改react-date-range中DefinedRange的语言为葡萄牙语？

react-date-range的locale参数仅负责日期相关的本地化（如月份、星期、日期格式），但预设范围（DefinedRange）的文本标签不会自动通过date-fns的locale翻译，需要手动自定义这些标签的葡萄牙语内容。

步骤1：创建葡萄牙语的预设范围数组 #

你可以选择完全自定义预设范围，或者基于组件默认的预设范围修改标签：

方式1：完全自定义预设范围

import { addDays, startOfDay, endOfDay, startOfWeek, endOfWeek, startOfMonth, endOfMonth } from 'date-fns';
import pt from 'date-fns/locale/pt';

// 葡萄牙语预设范围
const ptDefinedRanges = [
  {
    label: 'Hoje',
    range: () => ({
      startDate: startOfDay(new Date()),
      endDate: endOfDay(new Date()),
    }),
  },
  {
    label: 'Ontem',
    range: () => ({
      startDate: startOfDay(addDays(new Date(), -1)),
      endDate: endOfDay(addDays(new Date(), -1)),
    }),
  },
  {
    label: 'Esta Semana',
    range: () => ({
      startDate: startOfWeek(new Date(), { locale: pt }), // 确保周起始符合葡萄牙语习惯
      endDate: endOfWeek(new Date(), { locale: pt }),
    }),
  },
  {
    label: 'Última Semana',
    range: () => ({
      startDate: startOfWeek(addDays(new Date(), -7), { locale: pt }),
      endDate: endOfWeek(addDays(new Date(), -7), { locale: pt }),
    }),
  },
  {
    label: 'Este Mês',
    range: () => ({
      startDate: startOfMonth(new Date()),
      endDate: endOfMonth(new Date()),
    }),
  },
  {
    label: 'Último Mês',
    range: () => ({
      startDate: startOfMonth(addDays(new Date(), -30)),
      endDate: endOfMonth(addDays(new Date(), -30)),
    }),
  },
];

方式2：基于默认预设范围修改标签

如果想保留组件默认的预设范围逻辑，仅替换文本：

import { defaultDefinedRanges } from 'react-date-range';

const ptDefinedRanges = defaultDefinedRanges.map(range => {
  switch (range.label) {
    case 'Today':
      return { ...range, label: 'Hoje' };
    case 'Yesterday':
      return { ...range, label: 'Ontem' };
    case 'This Week':
      return { ...range, label: 'Esta Semana' };
    case 'Last Week':
      return { ...range, label: 'Última Semana' };
    case 'This Month':
      return { ...range, label: 'Este Mês' };
    case 'Last Month':
      return { ...range, label: 'Último Mês' };
    default:
      return range;
  }
});

步骤2：在组件中传入自定义的预设范围 #

将definedRanges属性添加到DateRangePicker组件中：

<DateRangePicker
  locale={pt}
  onChange={item => setRange([item.selection])}
  editableDateInputs={true}
  moveRangeOnFirstSelection={false}
  ranges={range}
  months={1}
  direction="horizontal"
  definedRanges={ptDefinedRanges} // 传入葡萄牙语预设范围
/>

这样就能同时让日期显示和预设范围标签都变为葡萄牙语了。

内容的提问来源于stack exchange，提问作者André