React Suite DateRangePicker Appearance

Last Updated : 18 Jun, 2022

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;