React Suite DatePicker Usage Placement

Last Updated : 07 Jul, 2022

React Suite is a front-end library for the middle platform and back-end products.

React Suite DatePicker component is used to take the date and time input from the user.

The placement prop of the React Suite DatePicker component defines the position of the DatePicker. It takes these values – ‘bottomStart’, ‘bottomEnd’, ‘topStart’, ‘topEnd’, ‘leftStart’, ‘leftEnd’, ‘rightStart’, ‘rightEnd’, ‘auto’, ‘autoVerticalStart’, ‘autoVerticalEnd’, ‘autoHorizontalStart’, ‘autoHorizontalEnd’.

Syntax:

<DatePicker placement=""/>

Prerequisite:

Introduction and Installation reactJS
React Suite DatePicker 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 DatePicker Component from “rsuite” and to apply the default styles of the components we are importing “rsuite/dist/rsuite.min.css”. Now to the DatePicker component, we are passing different values to the placement prop.

App.js

import { DatePicker } from "rsuite"; 
import "rsuite/dist/rsuite.min.css"; 
  
function App() { 
    const style = { 
        textAlign: "center", 
    }; 
    return ( 
        <div className="App"> 
            <h4> React Suite DatePicker Placement </h4> 
            <div style={style}> 
                <DatePicker placement="topStart" 
                    placeholder="topStart" /> 
                <DatePicker placement="topEnd" 
                    placeholder="topEnd" /> 
                <hr /> 
                <DatePicker placement="leftStart" 
                    placeholder="leftStart" /> 
                <DatePicker placement="leftEnd" 
                    placeholder="leftEnd" /> 
                <hr /> 
                <DatePicker placement="rightStart" 
                    placeholder="rightStart" /> 
                <DatePicker placement="rightEnd" 
                    placeholder="rightEnd" /> 
                <hr /> 
                <DatePicker placement="bottomStart" 
                    placeholder="bottomStart" /> 
                <DatePicker placement="bottomEnd" 
                    placeholder="bottomEnd" /> 
            </div> 
        </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 passing values like “auto”,”autoVerticalStart”,”autoVerticalEnd”,”autoHorizontalStart”, and “autoHorizontalEnd” to the placement prop.

App.js

import { DatePicker } from "rsuite"; 
import "rsuite/dist/rsuite.min.css"; 
  
function App() { 
    const style = { 
        textAlign: "center", 
    }; 
    return ( 
        <div className="App"> 
            <h4> React Suite DatePicker Placement </h4> 
            <div style={style}> 
                <DatePicker placement="auto" 
                    placeholder="auto" /> 
                <hr /> 
                <DatePicker 
                    placement="autoVerticalStart"
                    placeholder="autoVerticalStart"
                /> 
                <DatePicker placement="autoVerticalEnd" 
                    placeholder="autoVerticalEnd" /> 
                <hr /> 
                <DatePicker 
                    placement="autoHorizontalStart"
                    placeholder="autoHorizontalStart"
                /> 
                <DatePicker 
                    placement="autoHorizontalEnd"
                    placeholder="autoHorizontalEnd"
                /> 
                <hr /> 
            </div> 
        </div> 
    ); 
} 
  
export default App;