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. 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>
    );
}

Output:

Reference: https://rsuitejs.com/components/date-picker/#code-lt-date-picker-gt-code