React Suite DatePicker Usage Block

Last Updated : 08 Jun, 2022

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 Block.

The DatePicker Component is used to take the input of date and time from the users. To make the DatePicker component take up the whole width available the block attribute is used. It is a boolean attribute.

React Suite DatePicker Usage Block Components:

DatePicker: The DatePicker component is used to select or input the date and/or time.

React Suite DatePicker Usage Block Attributes/Props:

block: This is a boolean attribute which when set the component will take up the whole width available of the parent component.
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 block />

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 block attribute/prop.

Example 1: Now replace the code in the App.js file with the code below. In this example, we used the block attribute on the DatePicker component to make it take up the whole width available.

File: src/App.js

Javascript

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={{ padding: "0px 20px" }}> 
            <header style={{ 
                textAlign: "center", display: "block", 
                marginBottom: "30px"
            }}> 
                <h3 style={{ color: "green" }}>GeeksforGeeks</h3> 
                <h5>React Suite DatePicker Usage Block</h5> 
            </header> 
  
            <DatePicker style={datepickerStyle}  
                placeholder="Default DatePicker" /> 
  
            <DatePicker block style={datepickerStyle}  
                placeholder="Block DatePicker" /> 
        </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 shows the use of block DatePicker with different appearances.

File: src/App.js

Javascript

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={{ padding: "0px 20px" }}> 
            <header style={{ 
                textAlign: "center", display: "block", 
                marginBottom: "30px"
            }}> 
                <h3 style={{ color: "green" }}>GeeksforGeeks</h3> 
                <h5>React Suite DatePicker Usage Block</h5> 
            </header> 
  
            <DatePicker 
                appearance="default" block style={datepickerStyle} 
                placeholder="Block - Default Appearance" /> 
            <DatePicker 
                appearance="subtle" block style={datepickerStyle} 
                placeholder="Block - Subtle Appearance" /> 
        </div> 
    ); 
} 
  
export default App;