Trying to add 24 hour format to react-native DatePickerIOS

[SudoPlz]

This is a long requested feature, but no one seems to be doing anything about it.

I'm trying to add a boolean value to our DateTimePickerIOS so that the js part of it looks like this:

const RCTDatePickerIOS = requireNativeComponent('RCTDatePicker', {
 propTypes: {
 ...DatePickerIOS.propTypes,
 date: PropTypes.number,
 uses24hourFormat: PropTypes.bool, // <---
 minimumDate: PropTypes.number,
 maximumDate: PropTypes.number,
 onDateChange: () => null,
 onChange: PropTypes.func,
 }
});

Then I modified React > Views > RCTDateTimePickerManager.m. Specifically I added this code:

RCT_CUSTOM_VIEW_PROPERTY(uses24hourFormat, BOOL, UIDatePicker)
{
 BOOL is24hFormat = json ? [RCTConvert BOOL:json] : NO;
 if (is24hFormat) {
 [view setLocale:[NSLocale localeWithLocaleIdentifier:@"NL"]];
 } else {
 [view setLocale:defaultView.locale];
 }
}

That solution is based on this SO answer.

I've tried to do this, but with no luck at all.. Even-though this code compiles with no errors, I can't seem to do what I want.

On the other hand, I know that solution works, because when I modify this code on the same react-native file:

- (UIView *)view
{
 UIDatePicker* datePicker = [RCTDatePicker new];
// [datePicker setLocale:[NSLocale localeWithLocaleIdentifier:@"NL"]]; // If I uncomment this line
 return datePicker;
}

I do get a 24hour time picker, but I want to be able to do this from js.

Any ideas would be appreciated.
Also if someone from the fb team pointed me to the right direction I could open a pull request.

Thanks.

[antonshevchenko]

The UIDatePicker displays time based on the user's locale. It doesn't seem like you can override that behavior in terms of UI.

[SudoPlz]

You can if you initialise it for a different locale, that's what [view setLocale:[NSLocale localeWithLocaleIdentifier:@"NL"]]; does.

I tested it and it does work.

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.