React.js Blueprint DateInput2 Date formatting
Last Updated :
02 Nov, 2022
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
Share your thoughts in the comments
Please Login to comment...