onDateChange fires too slow, waits until animation is fully complete

[enerve]

Hi, Sometimes there is a race condition between the user changing the Date and the user then clicking "Save" on my form, i.e., the user might hit Save when they think the date is already set, but actually the DatePicker's animation is not yet complete and so the onDateChange has not yet fired. Anecdotally, I feel this gap can be almost 500ms sometimes. I think the issue is that a human can visually see from the animation that the scroller is clearly going to stop at the correct date, and then proceeds to click Save on the form.

Short of adding a 500ms delay to my Save action, I'm not sure what I can do to prevent this race condition.

Maybe you can consider firing the onDateChange even before the animation is fully complete, when you can predict what the value is going to end up being.

Alternatively, it would help if you can provide some way that I can know that the DatePicker is still in motion. Maybe even an initial onPress() callback would help me know the date picker is being used.

To Reproduce Add example code that reproduces the behavior.

 <DatePicker
              style={styles.input_date}
              date={formData.expiryDate}
              onDateChange={date => {
                console.log("UPDATED");
                setFormData(data => {return {...data, expiryDate: date}})}
              }
              androidVariant='nativeAndroid'
              mode="date"
              fadeToColor='#CCC'
              />

Smartphone (please complete the following information):

• OS: Android
• React Native version - 0.63.4
• react-native-date-picker version 3.2.7

Thanks!

[enerve]

Maybe a simpler proposal would be to add an "onDateDisplayChange" event -- this would fire every time (or almost every time) the date scroller visually "enters the region" of a new date/number (and not just when the date scroller has finally stopped scrolling). So for example if the date starts at "Jan 14 2021", when the user starts scrolling the month towards "Apr", this event would fire for "Feb 14 2021" and "Mar 14 2021" and finally "Apr 14 2021" the moment the scroller "enters" each of those. If the events are too spammy, perhaps you could set this to fire no more often than 100ms.

Let me know if i'm making any sense :)

[henninghall]

Interesting, I fully understand how this could be an issue. I will try to fix this or find a workaround for it at some point. If this is a big issue for you, you might want to consider using the iosClone variant, I am not sure but I believe it could be a bit quicker to return the new Date.

[ipekmuhammet]

it's also happening on ios, you should be wait until animation end. At this point animation is about to end but onDateChange does not triggers, and users press "Tamam" (Ok) button and selects previous time (00:00) by accident. is it possible to trigger onDateChange by guessing which time gonna be selected.

[MasterRedStorm]

I have this Problem as well, is there a workaround?

[suzaninfi]

Same issue here. It's quite easy for a user to hit 'save' too early, while the picker is still ending its scroll animation. Visually it looks like the date already changed, but the picker did not fire onDateChange yet and a save action results in the old date. For me it would be very helpful if there was some way to know that the picker is still 'busy' scrolling, then I could disable the save button during this time for example.

[gigeos]

I have this problem as well

[DanielT777]

Same here :'(

[vishalSharmaCfcs]

Use This code for date picker in react native

import DateTimePickerModal from 'react-native-modal-datetime-picker';

const App()=>{

const [isDatePickerVisible, setDatePickerVisibility] =useState(false); const [date, setDate] = useState(); const showDatePicker = () => { setDatePickerVisibility(true); };

const hideDatePicker = () => { setDatePickerVisibility(false); };

const handleConfirm = data => { setDate(data.toLocaleDateString()); hideDatePicker();

};

<DateTimePickerModal isVisible={isDatePickerVisible} mode="date" onConfirm={handleConfirm} onCancel={hideDatePicker} /> }

[AugustasDB]

So still no updates on this?

[EquesMedia]

I have this issue as well, and I have to say it is the only downside to using this package. Is there any workaround or is it planned to fix it anytime soon?

Thank you.

[henninghall]

Note to self: Might be worth trying out this solution on the iOS side https://gist.github.com/SudoPlz/6959001879fbfcc7e2aa42a428a5265c

[ProkudinaMaria]

Hi! Do you have any plans to fix this problem? In my case it'll be enough to have a parameter "onSpinStart" or smth like this, which can show when user start to spin time picker and I can disable button until the value is set

Thank you

[Elolawyn]

Is not only onDateChange it is onConfirm too. If you accept the modal without waiting too much, it returns the previously selected value. Last version with android and ios. On ios if you wait until the last sound it works but if you do it while it is spinning or the last sound did not trigger, the value does not update.

[denzariu]

I am facing the same issue while using the modal version of the picker (with 'onConfirm'). The waiting time until the animation stops is just too long and, even though the animation looks completed, more often than not the date does not change.

This is a bit of a deal-breaker for me., as it feels buggy.

[henninghall]

Thanks for the feedback everyone. It is now possible to wait until the animation is completed by listening on the onStateChange prop. See readme for more info.

If using the modal mode, the confirm button is disabled until the wheel has stopped spinning.

This feature is released in version 4.4.0, give it a shot!

(The underlying slowness issue is planned to be resolved in a future update)

[VVhispo]

Disabling confirm button until the animation stopped for modal does not seem to work with newArchEnabled = false, I think it might be connected to this issue: https://github.com/henninghall/react-native-date-picker/issues/786. I'm using 4.4.2