[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 (
<DatePickerIOS
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...

c1aff6b#diff-bb7f9a35dd5ae2a59fcff0292caf41f3

[dsibiski]

See my comment here for a workaround: 002024c#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 react-native@0.40.0