React Suite DatePicker DatePicker Props

Last Updated : 24 Aug, 2022

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. The DatePicker Component is used to choose a time or date from the picker.

DatePicker Props:

appearance: It is used for 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 the 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 the value is 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 a 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 components.
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.
howWeekNumbers: 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).

Syntax:

import { DatePicker } from "rsuite";
Function App() {
  return (
    <DatePicker format="yyyy-MM-dd HH:mm:ss" 
        ranges={...} />
}

Creating React Application And Installing Module:

Step 1: Create a React application using the given command:

npm create-react-app projectname

Step 2: After creating your project, move to it using the given command:

cd projectname

Step 3: Now Install the rsuite node package using the given command:

npm install rsuite

Project Structure: Now your project structure should look like the following:

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Example 1: Below example demonstrates the size, appearance, format, and range props of DatePicker component.

JavaScript

import "rsuite/dist/rsuite.min.css";
import React from "react";
import { DatePicker } from "rsuite";

export default function App() {
    return (
        <div>
            <div style={{ textAlign: "center" }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite DatePicker Prop
                </h4>
            </div>
            <div style={{ 
                padding: 20, 
                textAlign: "center" 
            }}>
                <DatePicker
                    appearance="default"
                    size="lg"
                    format="yyyy-MM-dd HH:mm:ss"
                    ranges={[
                        {
                            label: "Now",
                            value: new Date(),
                        },
                    ]}
                    style={{ width: 240 }}
                />
            </div>
        </div>
    );
}

Output:

Example 2: Below example demonstrates showMeridian and showWeekNumbers props of the DatePicker component.

JavaScript

import "rsuite/dist/rsuite.min.css";
import React from "react";
import { DatePicker } from "rsuite";

export default function App() {
    return (
        <div>
            <div style={{ textAlign: "center" }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite DatePicker Prop
                </h4>
            </div>
            <div style={{ 
                padding: 20, 
                textAlign: "center" 
            }}>
                <DatePicker
                    showMeridian
                    showWeekNumbers
                    size="lg"
                    style={{ width: 240 }}
                />
            </div>
        </div>
    );
}