使用 antd

问题描述

[在此处输入图片描述][1] 嗨，我正在使用 antd 的 Rangepicker，并想通过 Config 提供程序更改月份和日期的语言，我可以将占位符设置为法语，但无法将月份和日期设置为不同的语言。 请让我知道我应该导入不同的文件还是应该以不同的方式提供语言环境字段。

´´´ lang-js
从'antd/lib/locale/fr_FR'导入frFR；

if (value==='fr'){
返回 （

            <RangePicker
              locale={frFR}
              allowClear={false}
              onChange={a => console.log("Timeframe has changed")}
              className="datepicker"
            
            />
           </ConfigProvider>
           </div>
          );

} '''

**

我无法发布图片，但描述就像

    *Select box:         Date de debut -> Date de in
                         Jul 2021             Aug 2021
                Su Mo Tu We Th Fr Sa    Su Mo Tu We Th Fr Sa
                30 1   2  3  4  5  6    1   2  3  4  5  6  7*

`

解决方法

你需要在 ConfigProvider 上包装 RangePicker

      <ConfigProvider locale={frFR}>
        <RangePicker
          allowClear={false}
          onChange={a => console.log("Timeframe has changed")}
          className="datepicker"
        
        />
       </ConfigProvider>

,

我通过使用我们必须为该配置提供程序在本地启动时刻的时刻得到了答案。配置提供程序将围绕组件包装语言环境，我使用的是全局语言环境，但使用 moment.locale('de') 我们将 moment.locale('de') 设置为德语，配置提供程序使用它。 阅读 React 上下文文档以更好地了解上下文提供程序的工作原理。

import React,{useState} from "react";
import { DatePicker } from 'antd';
import { ConfigProvider} from 'antd'; 
import deDE from 'antd/lib/locale/de_DE';
import * as moment from 'moment';
const { RangePicker } = DatePicker;
const Datepicker = ({ value}) => {
  if (value ==='de'){
    moment.locale('de',{
      months : 'Januar_Februar_Marz_April_Mai_Juni_Juli_August_September_Octobre_Novmber_December'.split('_'),monthsShort : 'Jan_Feb_Mar_Apr_Mai_Juni_Juli_Aug_Sept_Oct_Nov_Dez'.split('_'),monthsParseExact : true,weekdays : 'sunday_montag_dienstag_mittwoch_donnerstag_fritag_samstag'.split('_'),weekdaysShort : 'sun._mon._die._mit._don._fri._sam.'.split('_'),weekdaysMin : 'Su_Mo_Di_Mi_Do_Fr_Sa'.split('_'),weekdaysParseExact : true,longDateFormat : {
          LT : 'HH:mm',LTS : 'HH:mm:ss',L : 'DD/MM/YYYY',LL : 'D MMMM YYYY',LLL : 'D MMMM YYYY HH:mm',LLLL : 'dddd D MMMM YYYY HH:mm'
      },calendar : {
          sameDay : '[Aujourd’hui à] LT',nextDay : '[Demain à] LT',nextWeek : 'dddd [à] LT',lastDay : '[Hier à] LT',lastWeek : 'dddd [dernier à] LT',sameElse : 'L'
      },relativeTime : {
          future : 'dans %s',past : 'il y a %s',s : 'quelques secondes',m : 'une minute',mm : '%d minutes',h : 'une heure',hh : '%d heures',d : 'un jour',dd : '%d jours',M : 'un mois',MM : '%d mois',y : 'un an',yy : '%d ans'
      },dayOfMonthOrdinalParse : /\d{1,2}(er|e)/,ordinal : function (number) {
          return number + (number === 1 ? 'er' : 'e');
      },meridiemParse : /PD|MD/,isPM : function (input) {
          return input.charAt(0) === 'M';
      },// In case the meridiem units are not separated around 12,then implement
      // this function (look at locale/id.js for an example).
      // meridiemHour : function (hour,meridiem) {
      //     return /* 0-23 hour,given meridiem token and hour 1-12 */ ;
      // },meridiem : function (hours,minutes,isLower) {
          return hours < 12 ? 'PD' : 'MD';
      },week: {
          dow: 1,// Monday is the first day of the week.
          doy: 4  // Used to determine first week of the year.
      }
  });

    return (
      <div>
      <ConfigProvider locale={deDE} >
        <RangePicker
          allowClear={false}
          onChange={a => console.log("[Datepicker] Timeframe has changes !")}
          className="datepicker"
        />
       </ConfigProvider>
       </div>
      );
  }