Блог

Я пытаюсь использовать компонент «react-datepicker» и установить языковой стандарт на основе языка пользователя.

 import React, { useState } from "react"
import DatePicker, {registerLocale} from "react-datepicker"
import "react-datepicker/dist/react-datepicker.css"
//import fns_locale from "date-fns/locale/en-GB"  // <-- this is OK

const userLocale = "en-GB"  // navigator.language
if (!userLocale) throw ("navigator.language is not defined")
const fns_locale:Locale = require(`date-fns/locale/${userLocale}`)        // this does NOT work ! 

registerLocale(userLocale, fns_locale)

interface Props {
  onChange: (date:Date|undefined) => void  
}


const MyDatePicker = (props:Props) => {
  const [date, setDate] = useState(new Date())
  
  function onChange (dates: Date|[Date,Date], evt:React.SyntheticEvent<any, Event>) {
      const date = dates as Date
      setDate(date)
      props.onChange(date)
  }

  return (<>  
    <DatePicker onChange={onChange} selected={date} locale={userLocale} dateFormat="P" /> Locale: {userLocale}
    </>)
}

export default MyDatePicker
 

пакет.json

     "react": "^17.0.1",
    "react-datepicker": "^3.8.0",
    "typescript": "^4.2.4",
 

Когда я устанавливаю языковой import fns_locale from "date-fns/locale/en-GB" стандарт, он работает,
но если я установлю его с помощью require,
const fns_locale:Locale = require(`date-fns/locale/${userLocale}`) ,
У меня есть эта ошибка:

locale.localize не определено в node_modules/date-fns/esm/format/index.js .