Skip to content
Related Articles

Related Articles

How to change language in react-day-picker DayPickerInput component ?

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 21 Mar, 2022

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It’s ‘V’ in MVC. ReactJS is an open-source, component-based front-end library responsible only for the view layer of the application. It is maintained by Facebook.

In this article, we will learn about How to change language in the react-day-picker DayPickerInput Component. Initially, we will learn about react-day-picker. 

The react-day-picker is designed to cover the most common needs for a date picker in web applications. The React DayPickerInput component is used to render an input field opening the DayPicker in an overlay.

Syntax:

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

Now let’s build a react application to learn further.

Step 1: Create a react application using the following command.

npx create-react-app foldername

Step 2: Once it is done, change your directory to the newly created application using the following command.

cd foldername

Step 3: Install the module using the following command:

npm install react-day-picker

Project Structure: It will look like this.

Step 3: Run the server using the following command:

npm start

Implementation: In order to change the language of DatePickerInput, we need to use the dayPickerProp i.e locale. This is known as localization.

Localization: The react-day-picker can be localized into any language (English being the default). This can be done by:

  • Using dayPickerProp (locale)
  • Using moment.js
  • Using Locale

Locale is used to set up language in DateInputPicker. It can be any language. We need to define some other props also based upon the language like weekdaysLong, weekdaysShort, months.

Syntax:

<DayPicker locale="*" weekdaysLong="*" weekdaysShort="*"  months="*" />

Example 1: In this example, we will preDefine Months, weekdays for the language. Then we will render them accordingly.

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 (
            <div>
                <p>
                    <select onChange={this.handleLanguage}>
                        <option value="en" selected>
                            English
                        </option>
                        <option value="it">Italian</option>
                    </select>
                </p>
  
                <DayPicker
                    locale={this.state.locale}
                    months={this.MONTHS[this.state.locale]}
                    weekdaysLong={this.WEEKDAYS_LONG[this.state.locale]}
                    weekdaysShort={this.WEEKDAYS_SHORT[this.state.locale]}
                />
            </div>
        );
    }
}
  
function App() {
    return (
        <div className="App">
            <div>
                <h1 style={{ color: "green" }}>GeeksforGeeks</h1>
                <h3>Changing Language in React DayInputPicker using Locale</h3>
                <br></br>
                <LocalizedExample />
            </div>
        </div>
    );
}
  
export default App;

Output:

Using Moment.js: Moment.js is a JavaScript package that makes it simple to parse, validate, manipulate, and display date/time in JavaScript. Moment.js allows you to display dates in a human-readable format based on your location. Moment.js can be used in a browser using the script approach. It is also compatible with Node.js and can be installed via npm.

Module Installation: Install this module using the following command:

npm install moment

Example 2: In this example, we will again have a dropdown menu for selecting Language, and the calendar will render accordingly. This time we don’t need to specifically mention weekdays and other props. These are imported using moment, for example, import ‘moment/locale/hi’ for Hindi language weeks, days, etc.

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 (
            <div>
                <p>
                    <select onChange={this.handleLanguage}>
                        <option value="en" selected>
                            English
                        </option>
                        <option value="hi">Hindi</option>
                        <option value="ur">Urdu</option>
  
                        <option value="ta">Tamil</option>
                        <option value="ar">Arabic</option>
                        <option value="it">Italian</option>
                    </select>
                </p>
  
                <DayPicker
                    localeUtils={MomentLocaleUtils}
                    locale={this.state.locale}
                />
            </div>
        );
    }
}
  
function App() {
    return (
        <div className="App">
            <div>
                <h1 style={{ color: "green" }}>GeeksforGeeks</h1>
                <h3>
                    Changing Language in React DayInputPicker using Moment.JS
                </h3>
                <br></br>
                <MomentLocalizedExample />
            </div>
        </div>
    );
}
  
export default App;

Output:

References:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!