React-native-modal-datetime-picker: DatePickerIOS minuteInterval prop doesn't work.

[ChristianTucker]

//js <DateTimePicker mode="time" minuteInterval='15' isVisible={ this.state.pickerOpened } onCancel={() => this.setState({pickerOpened: false}) } onConfirm={(date) => { this.setState({pickerOpened: false}); }} />

Should display 00, 15, 30, 45 for the minutes, but instead shows 0-59

[temitope]

@ChristianTucker the property takes a number rather than string value.
try this
minuteInterval={15}

[ChristianTucker]

Whoops, I'm sorry. It doesn't work as a number either, the String value was just me trying to see if it wanted a string or not. I copied the wrong snippet into my issue! It doesn't work with the number, throws an error with the string.

---

From: Temitope [e-mail]
Sent: Sunday, February 12, 2017 8:56 PM
To: mmazzarolo/react-native-modal-datetime-picker
Cc: Christian Tucker; Mention
Subject: Re: [mmazzarolo/react-native-modal-datetime-picker] DatePickerIOS minuteInterval prop doesn't work. (#16)

@ChristianTuckerhttps://github.com/ChristianTucker the property takes a number rather than string value.
try this
minuteInterval={15}

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/mmazzarolo/react-native-modal-datetime-picker/issues/16#issuecomment-279294627, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AWA_KZpMFrX026XNpJVXUtY-8Sn1Cw6Vks5rb-KPgaJpZM4L-x6r.

[temitope]

@ChristianTucker Hmm. It worked for me when putting brackets around the number. Can you paste your code and the error here?

[mmazzarolo]

Thanks @temitope for answering.
@ChristianTucker if it is a DatePickerIOS prop and you set it correctly it should work because this component just applies it directly to the DatePicketIOS.
What version of React-Native are you using? Are you sure minuteInterval is available in it?

[ChristianTucker]

//js <DateTimePicker mode="time" minuteInterval={15} isVisible={ this.state.pickerOpened } onCancel={() => this.setState({pickerOpened: false}) } onConfirm={(date) => { this.setState({pickerOpened: false}); }} />

There is no error, the picker just allows me to select from minutes ranging 0-59, instead of only [0,15,30,45]

I'm using RN 0.40

[mmazzarolo]

@ChristianTucker could you try and see if that prop actually works with the standard DatePickerIOS?

If it works on the that it should work here too, because as you can see from this line I'm simply passing all the other props to DatePickerIOS.
Also, can you paste here the entire code you're using?
Thanks!

[ChristianTucker]

@mmazzarolo

Here's a complete executable example:

```//js
import React from 'react';
import { View, Text, TouchableOpacity, DatePickerIOS } from 'react-native';
import DateTimePicker from 'react-native-modal-datetime-picker';

export default class GithubIssue extends React.Component {
constructor(props) {
super(props);
this.state = {
modalShown: false,
nativeShown: false,
minInterval: 1 };
}

componentDidMount() {
    this.setState({minInterval: 15});
}

render() {
    return <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <TouchableOpacity style={{width: 240, height: 40, backgroundColor: '#85144b'}}
            onPress={ () => this.setState({ modalShown: true }) }>
            <Text style={{color: 'white'}}>Open Modal Picker</Text>
        </TouchableOpacity>

        <View note="seperator" style={{width: 100, height: 40}} />

        <TouchableOpacity style={{width: 240, height: 40, backgroundColor: '#39CCCC'}}
            onPress={ () => this.setState({ nativeShown: true }) }>
            <Text>Open Native Picker</Text>
        </TouchableOpacity>

        <DatePickerIOS
            style={{width: 300, height: 300}}
            date={new Date()}
            mode="time"
            minuteInterval={this.state.minInterval}
            onDateChange={() => {} } />

        <DateTimePicker
            mode="time"
            minuteInterval={this.state.minInterval}
            isVisible={this.state.modalShown}
            onCancel={() => this.setState({modalShown: false})}
            onConfirm={() => {}} />
    </View>;
}

}

```

Please see the componentDidMount() call that sets the state of minInterval this is a "hack" that's required since commit 002024cc456246761421f6e5c354466baa819843 in the React-native codebase to allow <DatePickerIOS /> to display the minuteInterval correctly with mode="time"

This hack however, does not resolve the issue with this module, here's an image showing it working on <DatePickerIOS /> and not <DateTimePicker />

DatePickerIOS

DateTimePicker

[mmazzarolo]

I wasn't aware of that hack, it is probably the cause of the issue.

I can't try it right now, but could you try changing this:

<DateTimePicker
  mode="time"
  minuteInterval={this.state.minInterval}
  isVisible={this.state.modalShown}
  onCancel={() => this.setState({modalShown: false})}
  onConfirm={() => {}} />

to this:

{this.state.minInterval !== 1 && (
  <DateTimePicker
    mode="time"
    minuteInterval={this.state.minInterval}
    isVisible={this.state.modalShown}
    onCancel={() => this.setState({modalShown: false})}
    onConfirm={() => {}} />)

Just to see if it is related to the lifecycle of react-native-modal-datetime-picker?

Anyway, if it is a react-native issue (and it is if it requires an hack like this), in my opinion It should be fixed on the react-native side first. 🤔

Also, thank you for providing the test :)

[ChristianTucker]

@mmazzarolo Did not fix the issue, also while I agree with you, this bug has persisted for over 7 months now, while being known about, and it's common for things in react-native to not be fixed unless Facebook needs to fix it for one of their apps. (Straight from the fingers of the Facebook developers) or a PR to fix the issue.

I tried fixing/hacking the issue through cloning the repository, but I was unable to do it with the modal viewer, perhaps you'll have better luck.

[mmazzarolo]

Thank you for giving it a try and for pointing us to the issue 👍

[temitope]

@ChristianTucker whoops! you were totally right. I changed the code and in hotloading mode and it updated the timer in front of my face, but when i reopened that component normally the minute interval was not being applied. but knowing that it worked in hotloading i tried it out with a very hacky/imperative/unsightly setTimeout of about 500ms and it worked. will try with smaller wait time to see if i can make it unnoticeable from user pov

 _showModal_time = () => {
    this.setState({ isModalVisible_time: true});
    setTimeout(()=>{ this.setState({ daypicker_time_interval:15}); }, 500);
  }

[temitope]

nix that. @ChristianTucker doesnt work on multiple opens (because no re-rendering since no detected changes)...unless you go deeper into the hack hole. Sorry. hope they fix this

setTimeout(()=>{ this.setState({ picker_time_interval:1}); }, 100);
setTimeout(()=>{ this.setState({ picker_time_interval:15}); }, 250);

[mmazzarolo]

Closing for inactivity, feel free to post here if you want to discuss this subject further and I'll re-open it! 👨‍💻

[grigored]

Tried different options, the only one that worked, based on @temitope 's suggestion is:

    _hideDateTimePicker = () => {
        this.setState({ isDateTimePickerVisible: false });
        setTimeout(() => this.setState({minuteInterval: 1}), 300);
    };

    _showDateTimePicker = () => {
        this.setState({ isDateTimePickerVisible: true });
        setTimeout(() => this.setState({minuteInterval: 15}), 10);
    };

[hugoh59]

Nothing works for me even @grigored 's answer.

[aauffray]

@grigored 's answer works for me on the second modal open and beyond, but not the first one. It's a good start, thanks ! This issue has been bothering me for a while

[jigaroza287]

Thanks @grigored , for the try, for me, it works for the first time, but when show again after hiding it, the time interval again set back to 1 minute 🙁😕