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:
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;
|
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-picker/#placement
Similar Reads
React Suite DatePicker Usage Appearance
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 Appearance. The DatePicker Component is used to take the
3 min read
React Suite DatePicker Usage Set the local language
React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application. In this article, weâll learn about React suite DatePicker Usage S
3 min read
React Suite DatePicker Component
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. DatePicker component allows the user to select or input a date or time. We can use the following approach in ReactJS to use the React Suite DatePicker Component.
4 min read
React Suite DatePicker Usage Placeholder
React Suite is a front-end UI library built on top of React that lets us many pre-built components to our react application. It is a developer-friendly library and is a great base for building scalable and beautiful websites and applications. In this article, we will be seeing React Suite DatePicker
3 min read
React Suite DatePicker Usage Size
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 Suit
3 min read
React Suite DatePicker Usage Show week numbers
The React Suite DatePicker component is used to take the date and time input from the user. The showWeekNumbers prop denotes whether to show the week number or not. It takes a boolean value that is true by default. Syntax: <DatePicker showWeekNumbers /> Prerequisite: Introduction and Installat
3 min read
React Suite DatePicker Show month
React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application. In this article, weâll learn about React suite DatePicker Show mo
2 min read
React Suite DatePicker Usage Placement
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 - 'bottom
2 min read
React Suite DatePicker DatePicker Props
React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application. In this article, weâll learn about React suite DatePicker Prop. T
5 min read
React Suite DatePicker Usage Custom short options
React Suite is a front-end UI framework that has a set of React components that developers can use in their react app to fasten the development process. It supports all the major browsers like Chrome, Safari, Firefox, Brave, etc. In this example, we will be seeing React Suite DatePicker Usage Custom
3 min read