Skip to content

disableCalendarIcon prop for DatePickerInput #481

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 8, 2025
Merged

disableCalendarIcon prop for DatePickerInput #481

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6dc0c2f
Add disableCalendarIcon prop and alphabetize props in docs for consis…
iM-GeeKy Jun 8, 2025
e999a1e
Update test
iM-GeeKy Jun 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
142 changes: 73 additions & 69 deletions docusaurus/docs/date-picker/input-date-picker.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,111 +39,115 @@ View an interactive [Expo snack](https://snack.expo.dev/@fitzwabs/react-native-p

## Props

**locale (Required)**
`Type: String`
A locale can be composed of both a base language, the country (territory) of use, and possibly codeset (which is usually assumed). For example, German is de.
**animationType**
`Type: 'slide' | 'fade' | 'none' | undefined`
The animation used when opening the date picker modal. Defaults to `'slide'`.

**label (Required)**
`Type: String`
The label used to display in the component.
**disableCalendarIcon**
`Type: boolean | undefined`
Flag indicating if the calendar icon should be disabled. When set to `true`, the calendar icon will be disabled and users won't be able to click it to open the date picker modal. Defaults to `false`.

**value (Required)**
`Type: Date | undefined`
The value used to populate the component.
**disableStatusBarPadding**
`Type: boolean | undefined`
Flag indicating if the status bar padding should be enabled or not. Defaults to `false`.

**inputMode (Required)**
`Type: String`
The type of input needed for the the picker component.
**endYear**
`Type: number | undefined`
The end year when the component is rendered. Defaults to `2200`.

**onChange**
`Type: Function`
Callback event when the component date mask length matches the text input length.
**hasError**
`Type: boolean | undefined`
Flag indicating if the the component should display error styles.

**onChangeText**
`Type: Function`
Callback event when the component text input changes.
**hideValidationErrors**
`Type: boolean | undefined`
Flag indicating if the the component should hide error styles along with the `helperText` component displaying the error message.

**mode**
`Type: 'flat' | 'outlined'`
See [react-native-paper text-input](https://callstack.github.io/react-native-paper/text-input.html#mode).
**iconColor**
`Type: String`
Sets the color of the icon.

**iconSize**
`Type: Number`
Specifies the size of the icon in pixels.

**iconColor**
`Type: String`
Sets the color of the icon.

**iconStyle**
`Type: React.CSSProperties`
Defines the CSS styles for the icon element.

**validRange**
`Type: {
startDate: Date | undefined,
endDate: Date | undefined,
disabledDates: Date[] | undefined
}`
Limits which dates the user can navigate to and where events can go. Dates outside of the valid range will be grayed-out.

**withDateFormatInLabel**
**inputEnabled**
`Type: boolean | undefined`
Flag indicating if the date format should be inside the components label.
Flag indicating if the component should be enabled or not. Behavior similarly to `disabled`. Defaults to `true`.

**hasError**
`Type: boolean | undefined`
Flag indicating if the the component should display error styles.
**inputMode (Required)**
`Type: String`
The type of input needed for the the picker component.

**hideValidationErrors**
`Type: boolean | undefined`
Flag indicating if the the component should hide error styles along with the `helperText` component displaying the error message.
**label (Required)**
`Type: String`
The label used to display in the component.

**locale (Required)**
`Type: String`
A locale can be composed of both a base language, the country (territory) of use, and possibly codeset (which is usually assumed). For example, German is de.

**mode**
`Type: 'flat' | 'outlined'`
See [react-native-paper text-input](https://callstack.github.io/react-native-paper/text-input.html#mode).

**onChange**
`Type: Function`
Callback event when the component date mask length matches the text input length.

**onChangeText**
`Type: Function`
Callback event when the component text input changes.

**onValidationError**
`Type: Function | undefined`
Callback used to return any error messages from the components validation.

**presentationStyle**
`Type: 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen'`
Determines the visual presentation style of the date picker modal. This prop allows you to define how the modal appears on the screen when it is displayed.

- `'fullScreen'`: Presents the modal as a full-screen overlay.
- `'pageSheet'`: Displays the modal as a card-style sheet that covers a portion of the screen.
- `'formSheet'`: Renders the modal as a smaller form-style sheet.
- `'overFullScreen'`: Overlays the modal on top of the content, allowing interaction with the underlying content.

For example, if you set `presentationStyle` to `'pageSheet'`, the modal will be presented as a card-like sheet.

**saveLabelDisabled**
`Type: boolean | undefined`
Flag indicating if the save label should be disabled and unable to receive events. Defaults to `false`.

**uppercase**
**startWeekOnMonday**
`Type: boolean | undefined`
Flag indicating if the text in the component should be uppercase. Defaults to `true`.
Flag indicating if calendar grid sould show monday as the first column. Defaults to `false`.

**startYear**
`Type: number | undefined`
The start year when the component is rendered. Defaults to `1800`.

**endYear**
`Type: number | undefined`
The end year when the component is rendered. Defaults to `2200`.

**startWeekOnMonday**
`Type: boolean | undefined`
Flag indicating if calendar grid sould show monday as the first column. Defaults to `false`.

**inputEnabled**
`Type: boolean | undefined`
Flag indicating if the component should be enabled or not. Behavior similarly to `disabled`. Defaults to `true`.

**disableStatusBarPadding**
**uppercase**
`Type: boolean | undefined`
Flag indicating if the status bar padding should be enabled or not. Defaults to `false`.

**presentationStyle**
`Type: 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen'`
Determines the visual presentation style of the date picker modal. This prop allows you to define how the modal appears on the screen when it is displayed.
Flag indicating if the text in the component should be uppercase. Defaults to `true`.

- `'fullScreen'`: Presents the modal as a full-screen overlay.
- `'pageSheet'`: Displays the modal as a card-style sheet that covers a portion of the screen.
- `'formSheet'`: Renders the modal as a smaller form-style sheet.
- `'overFullScreen'`: Overlays the modal on top of the content, allowing interaction with the underlying content.
**validRange**
`Type: {
startDate: Date | undefined,
endDate: Date | undefined,
disabledDates: Date[] | undefined
}`
Limits which dates the user can navigate to and where events can go. Dates outside of the valid range will be grayed-out.

**animationType**
`Type: 'slide' | 'fade' | 'none' | undefined`
The animation used when opening the date picker modal. Defaults to `'slide'`.
**value (Required)**
`Type: Date | undefined`
The value used to populate the component.

For example, if you set `presentationStyle` to `'pageSheet'`, the modal will be presented as a card-like sheet.
**withDateFormatInLabel**
`Type: boolean | undefined`
Flag indicating if the date format should be inside the components label.

- Other [react-native TextInput props](https://reactnative.dev/docs/textinput#props).\*
116 changes: 58 additions & 58 deletions docusaurus/docs/date-picker/multiple-dates-picker.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,42 @@ View an interactive [Expo snack](https://snack.expo.dev/@fitzwabs/react-native-p

## Props

**animationType**
`Type: String | undefined`
The animation used when opening the component. Defaults to `'slide'` on ios/android and `'none'` on web.

**calendarIcon**
`Type: string | undefined`
The edit icon used to toggle between input and calendar. Defaults to `calendar`. You can pass the name of an icon from [MaterialCommunityIcons](https://materialdesignicons.com/).

**closeIcon**
`Type: string | undefined`
The icon used to close the component. Defaults to `close`. You can pass the name of an icon from [MaterialCommunityIcons](https://materialdesignicons.com/).

**dates (Required)**
`Type: Date[]`
The date values used to populate the component.

**disableStatusBarPadding**
`Type: boolean | undefined`
Flag indicating if the status bar padding should be enabled or not. Defaults to `false`.

**editIcon**
`Type: string | undefined`
The edit icon used to toggle between calendar and input. Defaults to `pencil`. You can pass the name of an icon from [MaterialCommunityIcons](https://materialdesignicons.com/).

**endLabel**
`Type: String | undefined`
The label used as the suffix to the ending date in the component. Defaults to `'To'`.

**endYear**
`Type: number | undefined`
The end year when the component is rendered. Defaults to `2200`.

**label**
`Type: String | undefined`
The label used as the header in the component. Defaults to `'Select date'`.

**locale (Required)**
`Type: String`
A locale can be composed of both a base language, the country (territory) of use, and possibly codeset (which is usually assumed). For example, German is de.
Expand All @@ -63,37 +99,21 @@ A locale can be composed of both a base language, the country (territory) of use
`Type: 'single' | 'multiple' | 'range'`
The selection type for the date picker. For this example it is `"multiple"`.

**visible (Required)**
`Type: boolean`
Flag indicating if the component should be displayed.
**moreLabel**
`Type: String | undefined`
The label used display when multiple dates have been selected in the component. Defaults to `'More'`.

**onDismiss (Required)**
**onChange**
`Type: Function`
The action to take when the component is closed.

**dates (Required)**
`Type: Date[]`
The date values used to populate the component.
Event handler when the component changes.

**onConfirm (Required)**
`Type: Function`
The action to take when the date is selected.

**moreLabel**
`Type: String | undefined`
The label used display when multiple dates have been selected in the component. Defaults to `'More'`.

**validRange**
`Type: {
startDate: Date | undefined,
endDate: Date | undefined,
disabledDates: Date[] | undefined
}`
Limits which dates the user can navigate to and where events can go. Dates outside of the valid range will be grayed-out.

**onChange**
**onDismiss (Required)**
`Type: Function`
Event handler when the component changes.
The action to take when the component is closed.

**saveLabel**
`Type: String | undefined`
Expand All @@ -103,53 +123,33 @@ The label used confirm a date selection. Defaults to `'Save'`.
`Type: boolean | undefined`
Flag indicating if the save label should be disabled and unable to receive events. Defaults to `false`.

**uppercase**
`Type: boolean | undefined`
Flag indicating if the text in the component should be uppercase. Defaults to `true`.

**label**
`Type: String | undefined`
The label used as the header in the component. Defaults to `'Select date'`.

**startLabel**
`Type: String | undefined`
The label used as the prefix to the starting date in the component. Defaults to `'From'`.

**endLabel**
`Type: String | undefined`
The label used as the suffix to the ending date in the component. Defaults to `'To'`.

**animationType**
`Type: String | undefined`
The animation used when opening the component. Defaults to `'slide'` on ios/android and `'none'` on web.
**startWeekOnMonday**
`Type: boolean | undefined`
Flag indicating if calendar grid sould show monday as the first column. Defaults to `false`.

**startYear**
`Type: number | undefined`
The start year when the component is rendered. Defaults to `1800`.

**endYear**
`Type: number | undefined`
The end year when the component is rendered. Defaults to `2200`.

**startWeekOnMonday**
**uppercase**
`Type: boolean | undefined`
Flag indicating if calendar grid sould show monday as the first column. Defaults to `false`.

**closeIcon**
`Type: string | undefined`
The icon used to close the component. Defaults to `close`. You can pass the name of an icon from [MaterialCommunityIcons](https://materialdesignicons.com/).

**editIcon**
`Type: string | undefined`
The edit icon used to toggle between calendar and input. Defaults to `pencil`. You can pass the name of an icon from [MaterialCommunityIcons](https://materialdesignicons.com/).
Flag indicating if the text in the component should be uppercase. Defaults to `true`.

**calendarIcon**
`Type: string | undefined`
The edit icon used to toggle between input and calendar. Defaults to `calendar`. You can pass the name of an icon from [MaterialCommunityIcons](https://materialdesignicons.com/).
**validRange**
`Type: {
startDate: Date | undefined,
endDate: Date | undefined,
disabledDates: Date[] | undefined
}`
Limits which dates the user can navigate to and where events can go. Dates outside of the valid range will be grayed-out.

**disableStatusBarPadding**
`Type: boolean | undefined`
Flag indicating if the status bar padding should be enabled or not. Defaults to `false`.
**visible (Required)**
`Type: boolean`
Flag indicating if the component should be displayed.

**presentationStyle**
`Type: 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen'`
Expand Down
Loading