Skip to content
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.

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

Trying to add 24 hour format to react-native DatePickerIOS #12405

Closed
SudoPlz opened this issue Feb 15, 2017 · 3 comments
Closed

Trying to add 24 hour format to react-native DatePickerIOS #12405

SudoPlz opened this issue Feb 15, 2017 · 3 comments
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@SudoPlz
Copy link
Contributor

SudoPlz commented Feb 15, 2017

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
Copy link

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
Copy link
Contributor Author

SudoPlz commented Feb 18, 2017

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
Copy link
Contributor

hramos commented Jul 25, 2017

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.

@hramos hramos closed this as completed Jul 25, 2017
@facebook facebook locked as resolved and limited conversation to collaborators Jul 25, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 25, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

4 participants