React Suite is a popular front-end UI framework that consisted of a set of React components that we can use in our react application. It is developer-friendly and supports the stable releases of all the modern browsers like Chrome, Edge, Firefox, Safari, etc. In this example, we will be seeing React Suite DatePicker Usage Date and time.
The DatePicker component is used to take the date/time input from the user. By default, it takes gives the option only for date input. We can set it to also take time input by using the format attribute. This attribute takes a string as a value, which is the format of the date and time of the input.
React Suite DatePicker Usage Date and Time Components:
- DatePicker: The DatePicker component is used to select or input the date and/or time.
React Suite DatePicker Usage Date and Time Attributes/Props:
- format: This attribute is used to set the format of the input of the DatePicker component.
- block: This is a boolean attribute which when set the component will take up the whole width available of the parent component.
Syntax:
<DatePicker format="yyyy-MM-dd HH:mm:ss" />
Creating The React Application And Installing React Suite in the Project:
Step 1: Create the React application using the npx command:
npx create-react-app foldername
Step 2: After creating the project folder, move to it using the cd command:
cd foldername
Step 3: After creating the ReactJS application, Install the rsuite module so that we can use the DatePicker component using the following command:
npm install rsuite
Project Structure: After following the above steps, the project structure will look like this:
Project Structure
Let’s see some examples to understand how to use the React Suite DatePicker format attribute/prop.
Example 1: Now replace the code in the App.js file with the code below. In this example, we used the format attribute of the DatePicker component to set the format of the date and time to input.
src/App.js
import "rsuite/dist/rsuite.min.css"; import React from "react"; import { DatePicker } from "rsuite"; function App() { const datepickerStyle = { marginBottom: "25px", marginTop: "10px" }; return ( <div className="App" style={{ display: "flex", alignItems: "center", flexDirection: "column" }}> <header style={{ textAlign: "center", display: "block", marginBottom: "30px" }}> <h3 style={{ color: "green" }}>neveropen</h3> <h5>React Suite DatePicker Usage Date and Time</h5> </header> <DatePicker style={datepickerStyle} format="yyyy-MM-dd HH:mm:ss" /> <DatePicker style={datepickerStyle} format="yyyy-MM-dd HH:mm" /> </div> ); } export default App; |
Run the Application: Run your app using the following command from the root directory of the project.
npm start
Output: Go to http://localhost:3000/ in your browser to see the output.
Example 2: In this example, we used the format attribute along with the block attribute to make the date-time picker take up the whole width.
src/App.js
import "rsuite/dist/rsuite.min.css"; import React from "react"; import { DatePicker } from "rsuite"; function App() { const datepickerStyle = { marginBottom: "25px", marginTop: "10px" }; return ( <div className="App" style={{ padding: "0px 30px" }}> <header style={{ textAlign: "center", display: "block", marginBottom: "30px" }}> <h3 style={{ color: "green" }}>neveropen</h3> <h5>React Suite DatePicker Usage Date and Time</h5> </header> <DatePicker block style={datepickerStyle} format="yyyy-MM-dd HH:mm:ss" /> <DatePicker block style={datepickerStyle} format="yyyy-MM-dd HH:mm" /> </div> ); } export default App; |
Run the Application: Run your app using the following command from the root directory of the project.
npm start
Output:
Reference: https://rsuitejs.com/components/date-picker/#date-and-time
