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 Date Input Date formatting. The Date Input 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 Popover when focused. In the blueprint, we can also format the date using two props: formatDate() and parseDate().
Syntax:
<DateInput
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. app name, 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 datetime component.
npm install @blueprintjs/datetime
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 the DateInput component. 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.
Javascript
import React, { useCallback, useState } from "react"; import "@blueprintjs/core/lib/css/blueprint.css"; import "@blueprintjs/datetime/lib/css/blueprint-datetime.css"; import { DateInput } from "@blueprintjs/datetime"; 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>neveropen</h1> <h2>ReactJs Blueprint DateInput Date Formatting</h2> </div> <div style={{ width: 500 }}> <DateInput 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 the DateInput component. The parseDate prop receives text inputted by the user which is then converted to a Date object and becomes the next value of the DateInput component.
Javascript
import React, { useCallback, useState } from "react"; import "@blueprintjs/core/lib/css/blueprint.css"; import "@blueprintjs/datetime/lib/css/blueprint-datetime.css"; import { DateInput } from "@blueprintjs/datetime"; 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>neveropen</h1> <h2>ReactJs Blueprint DateInput Date Formatting</h2> </div> <div style={{ width: 500 }}> <DateInput formatDate={formatDate} parseDate={parseDate} onChange={handleChange} placeholder="mm/dd/yyyy" value={dateVal} /> </div> </center> ); } export default App; |
Output:
Reference: https://blueprintjs.com/docs/#datetime/dateinput.date-formatting
