React Suite is a front-end UI library that consists of a set of React components developed by keeping developers in mind. It is a well-thought-out and developer-friendly library. In this article, we will be seeing React Suite DatePicker Usage Appearance.
The DatePicker Component is used to take the input of date and time from the users. The DatePicker component comes in two styles: default and subtle. The default style has a border around the component and a solid background while the subtle style has a transparent background and no border.
React Suite DatePicker Usage Appearance Components:
- DatePicker: The DatePicker component is used to select or input the date and/or time.
React Suite DatePicker Usage Appearance Attributes/Props:
- appearance: This attribute is used to set the appearance of the DatePicker component. It can have one of two values: “default” or “subtle”.
Syntax:
<DatePicker appearance="subtle" />
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 appearance attribute/prop.
Example 1: Now replace the code in the App.js file with the code below. In this example, we showed the difference between the appearance of the DatePicker component with default and subtle appearance.
src/App.js
import "rsuite/dist/rsuite.min.css"; import React from "react"; import { DatePicker } from "rsuite"; function App() { const datepickerStyle = { marginTop: "25px" }; 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 Appearance</h5> </header> <DatePicker appearance="default" style={datepickerStyle} placeholder="Default Appearance" /> <DatePicker appearance="subtle" style={datepickerStyle} placeholder="Subtle Appearance" /> </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: The below example shows the usage of the appearance attribute of the DatePicker component with dark mode.
src/App.js
import "rsuite/dist/rsuite.min.css"; import React from "react"; import { CustomProvider, DatePicker } from "rsuite"; function App() { const datepickerStyle = { marginTop: "25px" }; return ( <CustomProvider theme="dark"> <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 Appearance in Dark Mode</h5> </header> <DatePicker appearance="default" style={datepickerStyle} placeholder="Default Appearance" /> <DatePicker appearance="subtle" style={datepickerStyle} placeholder="Subtle Appearance" /> </div> </CustomProvider> ); } export default App; |
Output: Run the app to get the following output.
Reference: https://rsuitejs.com/components/date-picker/#appearance
