如何解决React DatePicker (react-datepicker) - 如何自动设置语言环境?
我正在尝试使用“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
package.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
中定义。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。