React Suite is a front-end UI library built on top of React that lets us many pre-built components to our react application. It is a developer-friendly library and is a great base for building scalable and beautiful websites and applications. In this article, we will be seeing React Suite DatePicker Usage Placeholder.
The DatePicker component is used to take the date/time input from the user. The placeholder attribute of the DatePicker component is used to overwrite the default placeholder with a custom one.
React Suite DatePicker Usage Placeholder Components:
- DatePicker: The DatePicker component is used to select or input the date and/or time.
React Suite DatePicker Usage Placeholder Attributes/Props:
- placeholder: This attribute is used to change the default placeholder value of the DatePicker component.
- size: This attribute is used on the DatePicker component to specify its size. It takes four values: “lg”, “md”, “sm” and “xs”.
Syntax:
<DatePicker placeholder="neveropen" />
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
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 placeholder attribute/prop.
Example 1: Now replace the code in the App.js file with the code below. In this example, we used the placeholder attribute of the DatePicker component to change the default placeholder value of the component.
Javascript
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 Placeholder</h5> </header> <p>DatePicker with Default Placeholder value: </p> <DatePicker style={datepickerStyle} /> <p>DatePicker with Custom Placeholder value: </p> <DatePicker block style={datepickerStyle} placeholder="Please select your D.O.B" /> </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: This example illustrates the use of the placeholder attribute of the DatePicker component with different sizes of the component.
Javascript
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 Placeholder</h5> </header> <DatePicker style={datepickerStyle} placeholder="ExtraSmall Placeholder" size="xs" /> <DatePicker style={datepickerStyle} placeholder="Small Placeholder" size="sm" /> <DatePicker style={datepickerStyle} placeholder="Medium Sized Placeholder" size="md" /> <DatePicker style={datepickerStyle} placeholder="Large Placeholder" size="lg" /> </div> ); } export default App; |
Output:
Reference: https://rsuitejs.com/components/date-picker/#placeholder
