React.js Blueprint DateInput2 Date formatting

Blueprint is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications.

In this article, we’ll discuss React.js Blueprint DateInput2 Date formatting. The DateInput2 component is a type of InputGroup that allows the users to pick the date as per choice and also the time zones. It shows a DatePicker inside a Popover2 when focused. In the blueprint, we can also format the date using two props: formatDate() and parseDate().

React.js BluePrint DateInput2 Date formatting Props:

• formatDate: It is a function to render a JavaScript Date to a string. The formatDate prop receives the current date and returns a locale string representation of it. It cannot have the user input the Date in the form of text input.
• parseDate: It is a callback function to deserialize user input text to a JavaScript Date object. The parseDate prop receives text inputted by the user which is then converted to a Date object and becomes the next value of the DateInput2 component.

Syntax:

<DateInput2
    value={...}
    formatDate={...}
    parseDate={...}
/>

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npm create-react-app appname

Step 2: After creating your project folder i.e. appname, move to it using the following command:

cd appname

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @blueprintjs/core

Step 4: Installing @blueprintjs datetime2 component.

npm install @blueprintjs/datetime2

Project Structure:

Steps to run the application: Run the project as follows:

npm start

Example 1: The below example demonstrates the usage of the formatDate prop of DateInput2 component.

Javascript

import React, { useCallback, useState } from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import "@blueprintjs/datetime/lib/css/blueprint-datetime.css";
import { DateInput2 } from "@blueprintjs/datetime2";

function App() {
    const [dateVal, setDateVal] = useState(null);
    const handleChange = useCallback(setDateVal, []);
    const formatDate = useCallback((Date) =>
        Date.toLocaleString(), []);

    return (
        <center>
            <div style={{ textAlign: "center", color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>
                    ReactJs Blueprint DateInput2 Date Formatting
                </h2>
            </div>
            <div style={{ width: 500 }}>
                <DateInput2
                    formatDate={formatDate}
                    onChange={handleChange}
                    placeholder="MM/DD/YYYY"
                    value={dateVal}
                />
            </div>
        </center>
    );
}

export default App;

Output:

Example 2: The below example demonstrates the usage of the parseDate prop of DateInput2 component.

Javascript

import React, { useCallback, useState } from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import "@blueprintjs/datetime/lib/css/blueprint-datetime.css";
import { DateInput2 } from "@blueprintjs/datetime2";

function App() {
    const [dateVal, setDateVal] = useState(null);
    const handleChange = useCallback(setDateVal, []);
    const formatDate = useCallback((Date) =>
          Date.toLocaleString(), []);
    const parseDate = useCallback((string) =>
          new Date(string), []);

    return (
        <center>
            <div style={{ textAlign: "center", color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>
                   ReactJs Blueprint DateInput2 Date Formatting
                </h2>
            </div>
            <div style={{ width: 500 }}>
                <DateInput2
                    formatDate={formatDate}
                    onChange={handleChange}
                    parseDate={parseDate}
                    placeholder="MM/DD/YYYY"
                    value={dateVal}
                />
            </div>
        </center>
    );
}

export default App;

Output:

Reference: https://blueprintjs.com/docs/#datetime2/date-input2.date-formatting