React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. React Suite DateRangePicker component provides the user an interface to select a date range.
React Suite DateRangePicker Component’s appearance prop defines how the DateRangePicker will visually appear to the users. It has two options that take a value either “default” or “subtle”.
Syntax:
<DateRangePicker appearance="subtle" />
Prerequisite:
- Introduction and installation reactJS
- React Suite DateRangePicker Component
Creating React Application and Module installation:
Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t, install create-react-app globally using the command npm -g create-react-app or install locally by npm i create-react-app.
npm create-react-app project
Step 2: After creating your project folder(i.e. project), move to it by using the following command.
cd project
Step 3: now install the dependency by using the following command:
npm install rsuite
Project Structure: It will look like this:
Example 1: We are importing the DateRangePicker Component from “rsuite”, and to apply the default styles of the components we are importing “rsuite/dist/rsuite.min.css”. To the DateRangePicker component, we are providing the appearance prop as “default”.
App.js
import { DateRangePicker } from "rsuite"; import "rsuite/dist/rsuite.min.css"; function App() { return ( <div className="App"> <h3>React Suite DateRangePicker Appearance</h3> <p>Appearance = default</p> <DateRangePicker appearance="default" /> </div> ); } export default App; |
Step to Run Application: Run the application using the following command from the project’s root directory.
npm start
Output:
Example 2: We are importing the DateRangePicker Component from “rsuite”, and to apply the default styles of the components we are importing “rsuite/dist/rsuite.min.css”. To the DateRangePicker component, we are providing the appearance prop as “subtle”.
App.js
import { DateRangePicker } from "rsuite"; import "rsuite/dist/rsuite.min.css"; function App() { return ( <div className="App"> <h3>React Suite DateRangePicker Appearance</h3> <p>Appearance = subtle</p> <DateRangePicker appearance="subtle" /> </div> ); } export default App; |
Step to Run Application: Run the application using the following command from the project’s root directory.
npm start
Output:
Reference: https://rsuitejs.com/components/date-range-picker/#appearance
