React Suite DatePicker Component

Last Updated : 11 Apr, 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. 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.

DatePicker Props:

appearance: It is used for the component appearance.
block: It is used to block an entire row.
calendarDefaultDate: It is used to denote the Calendar panel default presentation date and time.
cleanable: It is used to indicate whether the option can be emptied or not.
container: It is used to set the rendering container.
defaultOpen: It is used to denote the default value of the open property.
defaultValue: It is used to denote the default value.
disabled: It is used to indicate whether the component is disabled or not.
disabledDate: It is used to disable the date.
disabledHours: It is used to disable the hours.
disabledMinutes: It is used to disable the minutes.
disabledSeconds: It is used to disable the seconds.
format: It is used to denote the format of the date.
hideHours: It is used to hide the hours.
hideMinutes: It is used to hide the minutes.
hideSeconds: It is used to hide the seconds.
inline: It is used to display the date panel when component initial.
isoWeek: It is a boolean value denoting the ISO 8601 standard set or not.
limitEndYear: It is used to set the lower limit of the available year relative to the currently selected date.
locale: It is used for the i18n config.
onChange: It is a callback function that is triggered when the value changes.
onChangeCalendarDate: It is a callback function that is triggered when the calendar date changes.
onClean: It is a callback function that is triggered when value clean.
onClose: It is a callback function that is triggered on a close event.
onEnter: It is a callback function that is triggered before the overlay transitions in.
onEntered: It is a callback function that is triggered after the overlay finishes transitioning in.
onEntering: It is a callback function that is triggered as the overlay begins to transition in.
onExit: It is a callback function that is triggered right before the overlay transitions out.
onExited: It is a callback function that is triggered after the overlay finishes transitioning out.
onExiting: It is a callback function that is triggered as the overlay begins to transition out.
onNextMonth: It is used to switch to the callback function for the Next Month.
onOk: It is a callback function that is triggered on click ok the Ok button.
onOpen: It is a callback function that is triggered on open of the component.
onPrevMonth: It is a callback function that switches to the previous month.
onSelect: It is a callback function that is triggered on the selection of date or time.
onToggleMonthDropdown: It is a callback function that switches to the month view.
onToggleTimeDropdown: It is a callback function that switches to the time view.
oneTap: It is used to indicate whether to enable One-click to complete the selection date or not.
open: It is used to indicate whether open the component or not.
placeholder: It is used to denote the placeholder.
placement: It is used for the placement of component.
preventOverflow: It is used to prevent floating element overflow.
ranges: It is used for the shortcut config.
showMeridian: It is used to display hours in 12 formats.
showWeekNumbers: It is used to indicate whether to show week numbers or not.
toggleComponentClass: It can be used for the custom element for this component.
value: It is used to denote the value (Controlled).

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:
```
npx create-react-app foldername
```

Step 2: After creating your project folder i.e. foldername, move to it using the following command:
```
cd foldername
```
Step 3: After creating the ReactJS application, Install the required module using the following command:
```
npm install rsuite
```

Project Structure: It will look like the following.

Project Structure

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js

import React from 'react'
import 'rsuite/dist/styles/rsuite-default.css'; 
import { DatePicker } from 'rsuite'; 
  
export default function App() { 
  
  return ( 
    <div style={{ 
      display: 'block', width: 600, paddingLeft: 30 
    }}> 
      <h4>React Suite DatePicker Component</h4> 
      <DatePicker 
        style={{ width: 300 }} 
        placeholder="Select Date"
      /> 
    </div> 
  ); 
}