Skip to content

Commit 0311511

Browse files
iM-GeeKyiM-GeeKy
authored
Disable calendar icon (#481)
* Add disableCalendarIcon prop and alphabetize props in docs for consistency * Update test
1 parent e3278e7 commit 0311511

10 files changed

+294
-288
lines changed

‎docusaurus/docs/date-picker/input-date-picker.md

Lines changed: 73 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -39,111 +39,115 @@ View an interactive [Expo snack](https://snack.expo.dev/@fitzwabs/react-native-p
3939

4040
## Props
4141

42-
**locale (Required)**
43-
`Type: String`
44-
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.
42+
**animationType**
43+
`Type: 'slide' | 'fade' | 'none' | undefined`
44+
The animation used when opening the date picker modal. Defaults to `'slide'`.
4545

46-
**label (Required)**
47-
`Type: String`
48-
The label used to display in the component.
46+
**disableCalendarIcon**
47+
`Type: boolean | undefined`
48+
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`.
4949

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

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

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

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

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

7070
**iconSize**
7171
`Type: Number`
7272
Specifies the size of the icon in pixels.
7373

74-
**iconColor**
75-
`Type: String`
76-
Sets the color of the icon.
77-
7874
**iconStyle**
7975
`Type: React.CSSProperties`
8076
Defines the CSS styles for the icon element.
8177

82-
**validRange**
83-
`Type: {
84-
startDate: Date | undefined,
85-
endDate: Date | undefined,
86-
disabledDates: Date[] | undefined
87-
}`
88-
Limits which dates the user can navigate to and where events can go. Dates outside of the valid range will be grayed-out.
89-
90-
**withDateFormatInLabel**
78+
**inputEnabled**
9179
`Type: boolean | undefined`
92-
Flag indicating if the date format should be inside the components label.
80+
Flag indicating if the component should be enabled or not. Behavior similarly to `disabled`. Defaults to `true`.
9381

94-
**hasError**
95-
`Type: boolean | undefined`
96-
Flag indicating if the the component should display error styles.
82+
**inputMode (Required)**
83+
`Type: String`
84+
The type of input needed for the the picker component.
9785

98-
**hideValidationErrors**
99-
`Type: boolean | undefined`
100-
Flag indicating if the the component should hide error styles along with the `helperText` component displaying the error message.
86+
**label (Required)**
87+
`Type: String`
88+
The label used to display in the component.
89+
90+
**locale (Required)**
91+
`Type: String`
92+
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.
93+
94+
**mode**
95+
`Type: 'flat' | 'outlined'`
96+
See [react-native-paper text-input](https://callstack.github.io/react-native-paper/text-input.html#mode).
97+
98+
**onChange**
99+
`Type: Function`
100+
Callback event when the component date mask length matches the text input length.
101+
102+
**onChangeText**
103+
`Type: Function`
104+
Callback event when the component text input changes.
101105

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

110+
**presentationStyle**
111+
`Type: 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen'`
112+
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.
113+
114+
- `'fullScreen'`: Presents the modal as a full-screen overlay.
115+
- `'pageSheet'`: Displays the modal as a card-style sheet that covers a portion of the screen.
116+
- `'formSheet'`: Renders the modal as a smaller form-style sheet.
117+
- `'overFullScreen'`: Overlays the modal on top of the content, allowing interaction with the underlying content.
118+
119+
For example, if you set `presentationStyle` to `'pageSheet'`, the modal will be presented as a card-like sheet.
120+
106121
**saveLabelDisabled**
107122
`Type: boolean | undefined`
108123
Flag indicating if the save label should be disabled and unable to receive events. Defaults to `false`.
109124

110-
**uppercase**
125+
**startWeekOnMonday**
111126
`Type: boolean | undefined`
112-
Flag indicating if the text in the component should be uppercase. Defaults to `true`.
127+
Flag indicating if calendar grid sould show monday as the first column. Defaults to `false`.
113128

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

118-
**endYear**
119-
`Type: number | undefined`
120-
The end year when the component is rendered. Defaults to `2200`.
121-
122-
**startWeekOnMonday**
123-
`Type: boolean | undefined`
124-
Flag indicating if calendar grid sould show monday as the first column. Defaults to `false`.
125-
126-
**inputEnabled**
127-
`Type: boolean | undefined`
128-
Flag indicating if the component should be enabled or not. Behavior similarly to `disabled`. Defaults to `true`.
129-
130-
**disableStatusBarPadding**
133+
**uppercase**
131134
`Type: boolean | undefined`
132-
Flag indicating if the status bar padding should be enabled or not. Defaults to `false`.
133-
134-
**presentationStyle**
135-
`Type: 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen'`
136-
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.
135+
Flag indicating if the text in the component should be uppercase. Defaults to `true`.
137136

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

143-
**animationType**
144-
`Type: 'slide' | 'fade' | 'none' | undefined`
145-
The animation used when opening the date picker modal. Defaults to `'slide'`.
145+
**value (Required)**
146+
`Type: Date | undefined`
147+
The value used to populate the component.
146148

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

149153
- Other [react-native TextInput props](https://reactnative.dev/docs/textinput#props).\*

‎docusaurus/docs/date-picker/multiple-dates-picker.md

Lines changed: 58 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,42 @@ View an interactive [Expo snack](https://snack.expo.dev/@fitzwabs/react-native-p
5555

5656
## Props
5757

58+
**animationType**
59+
`Type: String | undefined`
60+
The animation used when opening the component. Defaults to `'slide'` on ios/android and `'none'` on web.
61+
62+
**calendarIcon**
63+
`Type: string | undefined`
64+
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/).
65+
66+
**closeIcon**
67+
`Type: string | undefined`
68+
The icon used to close the component. Defaults to `close`. You can pass the name of an icon from [MaterialCommunityIcons](https://materialdesignicons.com/).
69+
70+
**dates (Required)**
71+
`Type: Date[]`
72+
The date values used to populate the component.
73+
74+
**disableStatusBarPadding**
75+
`Type: boolean | undefined`
76+
Flag indicating if the status bar padding should be enabled or not. Defaults to `false`.
77+
78+
**editIcon**
79+
`Type: string | undefined`
80+
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/).
81+
82+
**endLabel**
83+
`Type: String | undefined`
84+
The label used as the suffix to the ending date in the component. Defaults to `'To'`.
85+
86+
**endYear**
87+
`Type: number | undefined`
88+
The end year when the component is rendered. Defaults to `2200`.
89+
90+
**label**
91+
`Type: String | undefined`
92+
The label used as the header in the component. Defaults to `'Select date'`.
93+
5894
**locale (Required)**
5995
`Type: String`
6096
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.
@@ -63,37 +99,21 @@ A locale can be composed of both a base language, the country (territory) of use
6399
`Type: 'single' | 'multiple' | 'range'`
64100
The selection type for the date picker. For this example it is `"multiple"`.
65101

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

70-
**onDismiss (Required)**
106+
**onChange**
71107
`Type: Function`
72-
The action to take when the component is closed.
73-
74-
**dates (Required)**
75-
`Type: Date[]`
76-
The date values used to populate the component.
108+
Event handler when the component changes.
77109

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

82-
**moreLabel**
83-
`Type: String | undefined`
84-
The label used display when multiple dates have been selected in the component. Defaults to `'More'`.
85-
86-
**validRange**
87-
`Type: {
88-
startDate: Date | undefined,
89-
endDate: Date | undefined,
90-
disabledDates: Date[] | undefined
91-
}`
92-
Limits which dates the user can navigate to and where events can go. Dates outside of the valid range will be grayed-out.
93-
94-
**onChange**
114+
**onDismiss (Required)**
95115
`Type: Function`
96-
Event handler when the component changes.
116+
The action to take when the component is closed.
97117

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

106-
**uppercase**
107-
`Type: boolean | undefined`
108-
Flag indicating if the text in the component should be uppercase. Defaults to `true`.
109-
110-
**label**
111-
`Type: String | undefined`
112-
The label used as the header in the component. Defaults to `'Select date'`.
113-
114126
**startLabel**
115127
`Type: String | undefined`
116128
The label used as the prefix to the starting date in the component. Defaults to `'From'`.
117129

118-
**endLabel**
119-
`Type: String | undefined`
120-
The label used as the suffix to the ending date in the component. Defaults to `'To'`.
121-
122-
**animationType**
123-
`Type: String | undefined`
124-
The animation used when opening the component. Defaults to `'slide'` on ios/android and `'none'` on web.
130+
**startWeekOnMonday**
131+
`Type: boolean | undefined`
132+
Flag indicating if calendar grid sould show monday as the first column. Defaults to `false`.
125133

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

130-
**endYear**
131-
`Type: number | undefined`
132-
The end year when the component is rendered. Defaults to `2200`.
133-
134-
**startWeekOnMonday**
138+
**uppercase**
135139
`Type: boolean | undefined`
136-
Flag indicating if calendar grid sould show monday as the first column. Defaults to `false`.
137-
138-
**closeIcon**
139-
`Type: string | undefined`
140-
The icon used to close the component. Defaults to `close`. You can pass the name of an icon from [MaterialCommunityIcons](https://materialdesignicons.com/).
141-
142-
**editIcon**
143-
`Type: string | undefined`
144-
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/).
140+
Flag indicating if the text in the component should be uppercase. Defaults to `true`.
145141

146-
**calendarIcon**
147-
`Type: string | undefined`
148-
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/).
142+
**validRange**
143+
`Type: {
144+
startDate: Date | undefined,
145+
endDate: Date | undefined,
146+
disabledDates: Date[] | undefined
147+
}`
148+
Limits which dates the user can navigate to and where events can go. Dates outside of the valid range will be grayed-out.
149149

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

154154
**presentationStyle**
155155
`Type: 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen'`

0 commit comments

Comments
 (0)