React Suite DatePicker Usage Size

Last Updated : 08 Jun, 2022

React suite is a set of React components developed by keeping developers in mind to make it easier for them to build scalable and efficient react interfaces. It supports all the stable releases of modern browsers like Chrome, Firefox, Safari, Brave, etc.

In this article, we will be seeing React Suite DatePicker Size. The DatePicker component is used to take input of date and time from the users. It comes in four different sizes: large, medium, small and extra-small.

React Suite DatePicker Usage Size Components:

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

React Suite DatePicker Usage Size Attributes/Props:

size: This attribute is used on the DatePicker component to specify its size. It takes four values: “lg”, “md”, “sm” and “xs”.
disabled: This is a boolean attribute used to disable the date picker component.

Creating The React Application And Installing Module:

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 change the size of the DatePicker component in React Suite library.

Example 1: Now replace the code in the App.js file with the code below. In this example, we used the DatePicker component with the size attribute to show all four sizes.

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={{ 
            display: "flex", alignItems: "center", 
            flexDirection: "column"
        }}> 
            <header style={{ 
                textAlign: "center", display: "block", 
                marginBottom: "30px"
            }}> 
                <h3 style={{ color: "green" }}>GeeksforGeeks</h3> 
                <h5>React Suite DatePicker Size</h5> 
            </header> 
  
            <DatePicker size="xs" style={datepickerStyle} /> 
            <DatePicker size="sm" style={datepickerStyle} /> 
            <DatePicker size="md" style={datepickerStyle} /> 
            <DatePicker size="lg" style={datepickerStyle} /> 
        </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 how the DatePicker can be disabled by using the disabled attribute.

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={{ 
            display: "flex", 
            alignItems: "center", 
            flexDirection: "column"
        }}> 
            <header style={{ 
                textAlign: "center", display: "block", 
                marginBottom: "30px"
            }}> 
                <h3 style={{ color: "green" }}>GeeksforGeeks</h3> 
                <h5>React Suite DatePicker Size</h5> 
            </header> 
  
            <DatePicker size="xs" style={datepickerStyle} /> 
            <DatePicker disabled size="sm" style={datepickerStyle} /> 
            <DatePicker size="md" style={datepickerStyle} /> 
            <DatePicker disabled size="lg" style={datepickerStyle} /> 
        </div> 
    ); 
} 
  
export default App;