DatePicker

Introduction

DatePicker represents a highly customizable component that allows users to enter and pick dates and times in different formats. Specifically, it provides a text input field and a calendar where users can manually enter their required date. You can configure this component to work with specific date format, restrict date ranges, change its appearance, and so on.

This component is a part of @react-form-builder/components-rsuite. The following introduces and describes available properties and options for the DatePicker component.

Main properties

The following general properties are available within the Main tab:

Name	Type	Description
Label	string	Provide a title for your component
Appearance	choice	Select either subtle or default appearance for the component. The subtle option removes borders for the input field and the calendar
Calendar Default Value	date	Sets default date value for calendar panel
Cleanable	boolean	If set to true, allows users to change specified date
Default open	boolean	If set to true, the calendar will be opened for users by default. Otherwise, calendar will be opened upon clicking
Default value	boolean	Sets default date value for the input field
Disabled	boolean	Disables the component
Editable	boolean	If set to true, the date can be entered via the keyboard
Format	string	Format of the date when rendered in the input (e.g., yyyy-MM-dd)
ISO Week	boolean	Enables ISO 8601 standard, starts each week with Monday when checked
Limit End Year	number	Maximum selectable year based on the currently selected date
Limit Start Year	number	Minimum selectable year based on the currently selected date
Open	boolean	Whether open the calendar; correlates with the default open property
Placeholder	string	Placeholder string
Placement	choice	Select the placement of component (e.g., bottom end, top start, etc.)
Prevent Overflow	boolean	Prevents floating element overflow
Show meridian	boolean	If set to true, displays hours in 12 format
Show week numbers	boolean	If set to true, displays week numbers
Size	choice	Select the size of the input field (e.g., large, small, etc.)
Value	date	Provide value for the input field

At the bottom of the Main properties menu, you can find additional options:

• Render When: Provides conditional rendering for your calendar as described in the corresponding chapter.
• HTML attributes: Allows you to provide custom HTML attributes for your form.

Style properties

These are properties that allow to customize the size, color and other style properties of your component:

• For Device: You can provide component's style customization for all devices or specific devices by using this dropdown list. Refer to Adaptive Layout for more details.

• Component > Class Name: Add a class name for your component for the subsequent styling if necessary.

• Wrapper: The options below enable you to tailor the appearance of your component and customize it for a specific device type, as selected in the For Device property:

  Name	Type	Description
  Width	number	Specifies the width for your component
  Height	number	Specifies the height for your component
  Margin top/right/bottom/left	number	Margin values for you component
  Color	string	Allows customizing the text color
  Background color	string	Enables customizing the background color