Skip to content

Commit 0b9f64e

Browse files
Update README
1 parent 8e30188 commit 0b9f64e

File tree

3 files changed

+52
-0
lines changed

3 files changed

+52
-0
lines changed

README.md

+52
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,10 @@ React Native date & time picker component for iOS, Android and Windows (please n
5151
<td><p align="center"><img src="./docs/images/android_date.png" width="200" height="400"/></p></td>
5252
<td><p align="center"><img src="./docs/images/android_time.png" width="200" height="400"/></p></td>
5353
</tr>
54+
<tr>
55+
<td><p align="center"><img src="./docs/images/android_material_date.jpg" width="200" height="400"/></p></td>
56+
<td><p align="center"><img src="./docs/images/android_material_time.jpg" width="200" height="400"/></p></td>
57+
</tr>
5458
<tr><td colspan=1><strong>Windows</strong></td></tr>
5559
<tr>
5660
<td><p align="center"><img src="./docs/images/windows_date.png" width="380" height="430"/></p></td>
@@ -77,6 +81,10 @@ React Native date & time picker component for iOS, Android and Windows (please n
7781
- [Props / params](#component-props--params-of-the-android-imperative-api)
7882
- [`mode` (`optional`)](#mode-optional)
7983
- [`display` (`optional`)](#display-optional)
84+
- [`design` (`optional`, `Android only`)](#design-optional)
85+
- [`initialInputMode` (`optional`, `Android only`)](#initialinputmode-optional-android-only)
86+
- [`title` (`optional`, `Android only`)](#title-optional-android-only)
87+
- [`fullscreen` (`optional`, `Android only`)](#fullscreen-optional-android-only)
8088
- [`onChange` (`optional`)](#onchange-optional)
8189
- [`value` (`required`)](#value-required)
8290
- [`maximumDate` (`optional`)](#maximumdate-optional)
@@ -287,6 +295,8 @@ The reason we recommend the imperative API is: on Android, the date/time picker
287295

288296
### Android styling
289297

298+
If you'd like to use the Material pickers, your app theme will need to inherit from `Theme.Material3.DayNight.NoActionBar` in `styles.xml`.
299+
290300
Styling of the dialogs on Android can be easily customized by using the provided config plugin, provided that you use a [Expo development build](https://docs.expo.dev/develop/development-builds/introduction/). The plugin allows you to configure color properties that cannot be set at runtime and requires building a new app binary to take effect.
291301

292302
Refer to this documentation for more information: [android-styling.md](/docs/android-styling.md).
@@ -334,6 +344,19 @@ List of possible values for iOS (maps to [preferredDatePickerStyle](https://deve
334344
<RNDateTimePicker display="spinner" />
335345
```
336346

347+
#### `design` (`optional`, `Android only`)
348+
349+
Defines if the picker should use Material 3 components or the default picker. The default value is `"default"`.
350+
351+
List of possible values
352+
353+
- `"default"`
354+
- `"material"`
355+
356+
```js
357+
<RNDateTimePicker design="material" />
358+
```
359+
337360
#### `onChange` (`optional`)
338361

339362
Date change handler.
@@ -482,6 +505,35 @@ Allows changing of the time picker to a 24-hour format. By default, this value i
482505
<RNDateTimePicker is24Hour={true} />
483506
```
484507

508+
#### `initialInputMode` (`optional`, `Android only`)
509+
510+
:warning: Has effect only when `design` is "material". Allows setting the initial input mode of the picker.
511+
512+
List of possible values:
513+
514+
- `"default"` - Recommended. Date pickers will show the calendar view by default, and time pickers will show the clock view by default.
515+
- `"keyboard"` - Both pickers will show an input where the user can type the date or time.
516+
517+
```js
518+
<RNDateTimePicker initialInputMode="default" />
519+
```
520+
521+
#### `title` (`optional`, `Android only`)
522+
523+
:warning: Has effect only when `design` is "material". Allows setting the title of the dialog for the pickers.
524+
525+
```js
526+
<RNDateTimePicker title="Choose anniversary" />
527+
```
528+
529+
#### `fullscreen` (`optional`, `Android only`)
530+
531+
:warning: Has effect only when `design` is "material". Allows setting the date picker dialog to be fullscreen.
532+
533+
```js
534+
<RNDateTimePicker fullscreen={true} />
535+
```
536+
485537
#### `positiveButton` (`optional`, `Android only`)
486538

487539
Set the positive button label and text color.

docs/images/android_material_date.jpg

90.6 KB
Loading

docs/images/android_material_time.jpg

91.8 KB
Loading

0 commit comments

Comments
 (0)