React-native: [DatePickerIOS] minuteInterval not work with mode="time" minimumDate={min} maximumDate={max}

[charlesLin]

render() {
let {year, month, day} = new Date();
let min = new Date(year, month, day, 8);
let max = new Date(year, month, day, 22);
return (
date={this.state.date}
mode="time"
minuteInterval={10}
minimumDate={min} maximumDate={max}
onDateChange={(date) => this.setState({date})}
/>);

I found that minuteInterval works on iOS emulator, but not work at real device both minuteInterval and date range feature.

[ilove8]

I have a same problem, but not work also my simulator. I'm use version 0.31

[olliebrennan]

Ditto. I am running 0.33.0 and this does not work. I am not using min/max date either. Keeping it simple.

[ferndopolis]

Confirming same issue.
Running Xcode 8.0,
React Native UIExplorer (master branch), with 10 minute interval

CalabashSmokeTest Native UIDatePicker with 30 minute interval
https://github.com/calabash/ios-smoke-test-app

[dsibiski]

@nicklockwood Do you think that your latest commit to the DatePicker could be preventing the minuteInterval prop from being set somehow? I wonder if there is something else going on here...

https://github.com/facebook/react-native/commit/c1aff6b116dd8ca42dd81ab59a542a3a6d18e46e#diff-bb7f9a35dd5ae2a59fcff0292caf41f3

[dsibiski]

See my comment here for a workaround: https://github.com/facebook/react-native/commit/002024cc456246761421f6e5c354466baa819843#commitcomment-19473525

[ferndopolis]

@dsibiski yes, confirming that adding back width: 320 to datePickerIOS style does fix this issue.

[fr1n63]

Still an issue at RN 0.38 - minuteInterval isn't passed through in any combination of props.

[MiLeung]

I found a workaround for this issue. In DatePickerIOS, set the minuteInterval prop to a local state.
e.g. minuteInterval={this.state.minuteInterval}
Then, in componentDidMount(), set this.state.minuteInterval to the desired minuteInterval.
e.g. componentDidMount() { this.setState({minuteInterval: 5}); }

[dsibiski]

@MiLeung Thanks! That works great! 👍

[albinhubsch]

@MiLeung sorry, that fix did not work for me.

It should be added to the issue that I only see this issue on my iPhone 5c, not my iPhone 6 or the simulator...

[MiLeung]

@albinhubsch (These are just ideas)

• Is your 5c on the latest iOS?
• Is your date picker component actually mounted before calling this.setState({minuteInterval: 5}); or are you returning null as a result of some logic in your render method?
• What version of RN are you using? (I was using 39.2 when I found this workaround)

[albinhubsch]

@MiLeung Ah, thanks! It was not mounted when setState was called 👍

[maxperry]

I confirm @dsibiski workaround works on RN 0.37. Just add minWidth: 320 to the DatePickerIOS style.

[tiaaaa123]

Both workaround does't work for me in [email protected]

[Blue-Lan]

@tiaaaa123
@dsibiski workaround does work on RN 0.40 for me.
I think some better solutions without modifying native library should be conceived,
or it will be painful every time I upgrade RN to a new version.

[kyangy]

@MiLeung method worked for me

[kushanson]

@MiLeung your method worked for me on react-native v0.44.3. This is a nice workaround that doesn't involve hacking or forking the react-native libraries. Thank you for sharing!

[wsun]

Has anyone had any luck getting minuteInterval to work on RN >= 0.45? Setting fixed width worked for me up to RN 44, but something seems to have changed, such that neither of the above workarounds work anymore.

[alexbuicescu]

@wsun, MiLeung's workaround is working for me on RN = 0.48

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[hugoh59]

Hey the previous workaround only worked for me when I added a constructor with a different value than the one inside the componentDidMount() method. I set it to 0 in the constructor and to 15 in the componentDidMount() which then worked.

[Stas-Buzunko]

@hugoh1995 what version of react native does it work in for you?

[grabbou]

This is still an issue.

[grabbou]

You can easily debug this by going to RNTester DatePickerExample and changing the type of last example to time only.

[dulmandakh]

This is fixed in #23923. And will be included in a next release.