如何更改 react-day-picker DayPickerInput 组件中的语言？

React 是一个用于构建用户界面的声明式、高效且灵活的 JavaScript 库。它是 MVC 中的“V”。 ReactJS 是一个开源的、基于组件的前端库，只负责应用程序的视图层。它由 Facebook 维护。

在本文中，我们将了解如何在react-day-picker DayPickerInput组件中更改语言。最初，我们将学习 react-day-picker。

react-day-picker旨在满足 Web 应用程序中日期选择器的最常见需求。 React DayPickerInput组件用于渲染在叠加层中打开 DayPicker 的输入字段。

句法：

import DayPickerInput from 'react-day-picker/DayPickerInput';

现在让我们构建一个 React 应用程序来进一步学习。

第 1 步：使用以下命令创建一个反应应用程序。

npx create-react-app foldername

第 2 步：完成后，使用以下命令将目录更改为新创建的应用程序。

cd foldername

第 3 步：使用以下命令安装模块：

npm install react-day-picker

项目结构：它看起来像这样。

第 3 步：使用以下命令运行服务器：

npm start

实现：为了改变 DatePickerInput 的语言，我们需要使用 dayPickerProp 即 locale。这称为本地化。

本地化： react-day-picker 可以本地化为任何语言（默认为英语）。这可以通过以下方式完成：

使用 dayPickerProp（语言环境）
使用 moment.js
使用语言环境

Locale用于在 DateInputPicker 中设置语言。它可以是任何语言。我们还需要根据语言定义一些其他属性，例如 weekdaysLong、weekdaysShort、months。

句法：

示例 1：在此示例中，我们将预定义语言的月份、工作日。然后我们将相应地渲染它们。

Javascript

import React from "react";
import DayPicker from "react-day-picker";
import "react-day-picker/lib/style.css";
  
class LocalizedExample extends React.Component {
    constructor(props) {
        super(props);
        this.handleLanguage = this.handleLanguage.bind(this);
        this.state = {
            locale: "en",
        };
    }
    WEEKDAYS_LONG = {
        en: [
            "Sunday",
            "Monday",
            "Tuesday",
            "Wednesday",
            "Thursday",
            "Friday",
            "Saturday",
        ],
        it: [
            "Domenica",
            "Lunedì",
            "Martedì",
            "Mercoledì",
            "Giovedì",
            "Venerdì",
            "Sabato",
        ],
    };
    WEEKDAYS_SHORT = {
        en: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
        it: ["D", "L", "M", "M", "G", "V", "S"],
    };
    MONTHS = {
        en: [
            "January",
            "February",
            "March",
            "April",
            "May",
            "June",
            "July",
            "August",
            "September",
            "October",
            "November",
            "December",
        ],
        it: [
            "Gennaio",
            "Febbraio",
            "Marzo",
            "Aprile",
            "Maggio",
            "Giugno",
            "Luglio",
            "Agosto",
            "Settembre",
            "Ottobre",
            "Novembre",
            "Dicembre",
        ],
    };
    handleLanguage(e) {
        this.setState({
            locale: e.target.value,
        });
    }
  
    render() {
        return (
            
                
                    
                
  
                
            
        );
    }
}
  
function App() {
    return (
        
            
                GeeksforGeeks
                Changing Language in React DayInputPicker using Locale
                


                
            
        
    );
}
  
export default App;

Javascript

import React from "react";
import { useState } from "react";
import DayPicker from "react-day-picker";
import "react-toastify/dist/ReactToastify.css";
import "react-day-picker/lib/style.css";
import MomentLocaleUtils from "react-day-picker/moment";
  
// For languages
import "moment/locale/ta";
import "moment/locale/ar";
import "moment/locale/hi";
import "moment/locale/it";
import "moment/locale/ur";
  
class MomentLocalizedExample extends React.Component {
    constructor(props) {
        super(props);
        this.handleLanguage = this.handleLanguage.bind(this);
        this.state = {
            locale: "en",
        };
    }
  
    handleLanguage(e) {
        this.setState({
            locale: e.target.value,
        });
    }
  
    render() {
        return (
            
                
                    
                
  
                
            
        );
    }
}
  
function App() {
    return (
        
            
                GeeksforGeeks
                
                    Changing Language in React DayInputPicker using Moment.JS
                
                


                
            
        
    );
}
  
export default App;

输出：

使用 Moment.js： Moment.js 是一个 JavaScript 包，它使得在 JavaScript 中解析、验证、操作和显示日期/时间变得简单。 Moment.js 允许您根据您的位置以人类可读的格式显示日期。 Moment.js 可以使用脚本方法在浏览器中使用。它还与 Node.js 兼容，可以通过 npm 安装。

模块安装：使用以下命令安装此模块：

npm install moment

示例 2：在此示例中，我们将再次有一个用于选择语言的下拉菜单，并且日历将相应地呈现。这次我们不需要特别提到平日和其他道具。这些是使用 moment 导入的，例如，import 'moment/locale/hi' 表示印地语周、天等。

Javascript

import React from "react";
import { useState } from "react";
import DayPicker from "react-day-picker";
import "react-toastify/dist/ReactToastify.css";
import "react-day-picker/lib/style.css";
import MomentLocaleUtils from "react-day-picker/moment";
  
// For languages
import "moment/locale/ta";
import "moment/locale/ar";
import "moment/locale/hi";
import "moment/locale/it";
import "moment/locale/ur";
  
class MomentLocalizedExample extends React.Component {
    constructor(props) {
        super(props);
        this.handleLanguage = this.handleLanguage.bind(this);
        this.state = {
            locale: "en",
        };
    }
  
    handleLanguage(e) {
        this.setState({
            locale: e.target.value,
        });
    }
  
    render() {
        return (
            
                
                    
                
  
                
            
        );
    }
}
  
function App() {
    return (
        
            
                GeeksforGeeks
                
                    Changing Language in React DayInputPicker using Moment.JS
                
                


                
            
        
    );
}
  
export default App;

输出：

参考：

https://momentjs.com/
https://react-day-picker.js.org/