You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
On Android, the picker will be controlled by the system locale. If you wish to change it, [see instructions here](https://stackoverflow.com/a/2900144/2070942).
177
183
178
-
On iOS, the locale can be controlled from Xcode, as [documented here](https://developer.apple.com/documentation/xcode/adding-support-for-languages-and-regions).
179
-
> To localize the calendar days (avoid mixed language for month and day names): If you use a library like [i18next](https://github.com/i18next/react-i18next) or [react-localize-redux](https://github.com/ryandrewjohnson/react-localize-redux) to manage your translations, it is sufficient to add your target languages in the `project.pbxproj` as described in the Apple Documentation - but you are not required to add any localization keys (like the days of the week). iOS will automatically display the correct localized strings as long as the target language is contained in `project.pbxproj`.
184
+
On iOS, use XCode, as [documented here](https://developer.apple.com/documentation/xcode/adding-support-for-languages-and-regions) to inform the OS about the locales your application supports. iOS will automatically display the correctly localized DateTimePicker as long as the target language is contained in `project.pbxproj`.
185
+
186
+
> If you use a library like [i18next](https://github.com/i18next/react-i18next) or [react-localize-redux](https://github.com/ryandrewjohnson/react-localize-redux) to manage your translations, it is sufficient to add your target languages as described in the Apple Documentation - but you are not required to add any localization keys (like, for example, the days of the week). iOS will automatically display the correct localized strings as long as the target language is contained in `project.pbxproj`.
187
+
188
+
For testing your localization setup, refer [here](https://developer.apple.com/documentation/xcode/testing-localizations-when-running-your-app).
180
189
181
-
There is also the iOS-only locale prop that can be used to force locale in some cases but its usage is discouraged due to [not working robustly in all picker modes](./docs/images/ios_date_new.png) (note the mixed month and day names).
190
+
There is also the iOS-only locale prop that can be used to force locale in some cases but its usage is discouraged due to [not working robustly in all picker modes](./docs/images/ios_date_new.png) (note the mixed month and day names). To the best of our knowledge, it works reliably in the `spinner` mode.
182
191
183
192
For Expo, follow the [localization docs](https://docs.expo.dev/distribution/app-stores/#localizing-your-ios-app).
184
193
@@ -315,6 +324,21 @@ Allows changing of the textColor of the date picker. Has effect only when `displ
315
324
<RNDateTimePicker textColor="red"/>
316
325
```
317
326
327
+
#### `themeVariant` (`optional`, `iOS only`)
328
+
329
+
Allows overriding system theme variant (dark or light mode) used by the date picker.
330
+
331
+
:warning: Has effect only on iOS 14 and later. On iOS 13 & less, use `textColor` to make the picker dark-theme compatible
332
+
333
+
List of possible values:
334
+
335
+
-`"light"`
336
+
-`"dark"`
337
+
338
+
```js
339
+
<RNDateTimePicker themeVariant="light"/>
340
+
```
341
+
318
342
#### `locale` (`optional`, `iOS only`)
319
343
320
344
Allows changing the locale of the component. This affects the displayed text and the date / time formatting. By default, the device's locale is used. Please note using this prop is discouraged due to not working reliably in all picker modes.
@@ -326,7 +350,7 @@ Prefer localization as documented in [Localization note](#localization-note).
326
350
327
351
#### `is24Hour` (`optional`, `Windows and Android only`)
328
352
329
-
Allows changing of the time picker to a 24 hour format. By default, this value is decided automatcially based on the user's chosen locale and other preferences.
353
+
Allows changing of the time picker to a 24 hour format. By default, this value is decided automatcially based on the locale and other preferences.
330
354
331
355
```js
332
356
<RNDateTimePicker is24Hour={true} />
@@ -346,7 +370,7 @@ Pressing button can be observed in onChange handler as `event.type === 'neutralB
(On Windows, this can be any number between 0-59.)
373
+
On Windows, this can be any number between 0-59.
350
374
351
375
on iOS, this in only supported when `display="spinner"`
352
376
@@ -356,31 +380,17 @@ on iOS, this in only supported when `display="spinner"`
356
380
357
381
#### `style` (`optional`, `iOS only`)
358
382
359
-
Sets style directly on picker component. By default, the picker height is fixed to 216px.
383
+
Sets style directly on picker component. By default, the picker height is determined based on the `display` prop.
360
384
361
385
Please note that by default, picker's text color is controlled by the application theme (light / dark mode). In dark mode, text is white and in light mode, text is black.
362
386
363
-
This means that eg. if the device has dark mode turned on, and your screen background color is white, you will not see the picker. Please use the `Appearance` api to adjust the picker's background color so that it is visible, as we do in the [example App](/example/App.js), use `themeVariant` prop or [opt-out from dark mode](https://stackoverflow.com/a/56546554/2070942).
387
+
This means that eg. if the device has dark mode turned on, and your screen background color is white, you will not see the picker. Please use the `Appearance` api to adjust the picker's background color so that it is visible, as we do in the [example App](/example/App.js).
388
+
Alternatively, use the `themeVariant` prop or [opt-out from dark mode (discouraged)](https://stackoverflow.com/a/56546554/2070942).
364
389
365
390
```js
366
391
<RNDateTimePicker style={{flex:1}} />
367
392
```
368
393
369
-
#### `themeVariant` (`optional`, `iOS only`)
370
-
371
-
Allows overriding system theme variant (dark or light mode) used by the date picker.
372
-
373
-
:warning: Has effect only on iOS 14 and later. On iOS 13 & less, use `textColor` to make the picker dark-theme compatible
374
-
375
-
List of possible values:
376
-
377
-
-`"light"`
378
-
-`"dark"`
379
-
380
-
```js
381
-
<RNDateTimePicker themeVariant="light"/>
382
-
```
383
-
384
394
#### `disabled` (`optional`, `iOS only`)
385
395
386
396
If true, the user won't be able to interact with the view.
@@ -404,7 +414,7 @@ Please see [manual-installation.md](/docs/manual-installation.md)
404
414
3. Install required pods by running `npx pod-install`
405
415
4. Run `yarn start` to start Metro Bundler
406
416
5. Run `yarn run start:ios` or `yarn run start:android` or `yarn run start:windows`
407
-
6. To do any development on the library, open the example project (in the example folder!) in xCode or Android Studio. The example project depends on the library code, which you can edit and observe any changes in the example project.
417
+
6. To do any development on the library, open the example project (in the `example` folder) in xCode or Android Studio. The example project depends on the library code, which you can edit and observe any changes in the example project.
0 commit comments