Skip to content

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

Description

@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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions