DateTimePicker ignores minimumDate and maximumDate properties. On IOS it works fine.
As a workaround any logic can be done inside onChange
React native info output:
System:
OS: macOS 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz
Memory: 1.12 GB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.16.3 - /usr/local/bin/node
Yarn: 1.21.1 - /usr/local/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
Android SDK:
API Levels: 28
Build Tools: 28.0.3, 29.0.2
System Images: android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.6010548
Xcode: 11.3/11C29 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.6 => 16.8.6
react-native: 0.60.5 => 0.60.5
Library version: 2.1.0
if (Platform.OS === 'android') {
return (
<DateTimePicker
value={dateValue}
mode={mode}
minimumDate={minimumDate}
maximumDate={maximumDate}
display="spinner"
onChange={(e, date) => {
if (date === undefined) {
onDismiss();
} else {
if (minimumDate && date < minimumDate) {
console.log('LOWER THAT MINIMUM DATE');
} else if (maximumDate && date > maximumDate) {
console.log('BIGGER THAN MAXIMUM DATE');
} else {
onChange(date);
}
}
}}
/>
);
}
minimumDate and maximumDate still not working?
Same issue here
For me it's ignoring the minimumDate, the maximumDate is working.
EDIT: Ops, I did put the minimumDate and maximumDate has same value and then the minimumDate is ignored (same variable on both parameters), maybe still a bug, if minimumDate == maximumDate then it should have one day to select, right? If the minimumDate and maximumDate is different then it works.
Hey, I think this bug also is on iOS.
I confirm what @mjschutz said, if minimumDate & maximumDate has same value, minimumDate is ignored. BUT in fact, if maximumDate props is passed without a well value, minimumDate doesn't work.
I've 'patched' this by setting a condition in the RNDateTimePicker component' props:
<DatePicker
value={this.state.selectedDate}
minimumDate={ minDate || null }
maximumDate={ maxDate || null }
onChange={(e, date) => this.setState({selectedDate: date}) }
/>
Hope this will help !
I'm seeing this bug on Android when using mode="datetime" and setting maximumDate={new Date()}.
The date part of maximumDate works fine, but the time part allows a user to input a time hours in the future.
On iOS, everything works as expected.
On my side, the problems happen only in time mode, in date mode, everything seems to work properly, the date before or after the minimum and maximum are grey and not clickable, but unfortunately when the picker is in time mode, I totally can select a time before the minimumDate.
Everything is ok on iOS, problem is only on Android side.
EDIT:
Seems that for a TimePicker on Android side this option is not available, I think it need to be precise in the Readme
Hello. How Can I set Minimum Time? If anyone have written its own code for time so kindly share it..
On my side, the problems happen only in
timemode, indatemode, everything seems to work properly, the date before or after the minimum and maximum are grey and not clickable, but unfortunately when the picker is intimemode, I totally can select a time before the minimumDate.
Everything is ok on iOS, problem is only on Android side.EDIT:
Seems that for aTimePickeron Android side this option is not available, I think it need to be precise in the Readme
yes , I also faced the same problem
On my side, the problems happen only in
timemode, indatemode, everything seems to work properly, the date before or after the minimum and maximum are grey and not clickable, but unfortunately when the picker is intimemode, I totally can select a time before the minimumDate.
Everything is ok on iOS, problem is only on Android side.
EDIT:
Seems that for aTimePickeron Android side this option is not available, I think it need to be precise in the Readme
https://github.com/react-native-community/datetimepicker/blob/58218994a599232dedee80762373c56429585082/src/datetimepicker.android.js#L47yes , I also faced the same problem
for minimum time, i need to write my own code..
this is my code and is working perfectly fine...
const onDateTimeChange = (event, newDate) => {
setShow(Platform.OS === 'ios');
console.log('newDate', newDate);
if (mode === 'date') {
console.log('newDate', newDate);
const currentDate = newDate || new Date();
setBookingDateInfo({
bookingDay: moment(currentDate).format('ddd'),
bookingDate: moment(currentDate).format('MMMM D, YYYY'),
});
setMode('time');
setShow(Platform.OS !== 'ios'); // to show the picker again in time mode
} else {
const selectedHour = newDate.getHours();
const selectedMinutes = newDate.getMinutes();
const currentHour = new Date().getHours();
const currentMinutes = new Date().getMinutes();
if (selectedHour >= currentHour && selectedMinutes >= currentMinutes) {
setBookingTime(moment(newDate).format('h:mm a'));
// console.log('bookingtime', bookingTime);
setShow(Platform.OS === 'ios');
setMode('date');
} else {
setBookingTime(moment(new Date()).format('h:mm a'));
// console.log('bookingtime', bookingTime);
setShow(Platform.OS === 'ios');
setMode('date');
}
}
};
I also experienced this bug. It's not coherent with the iOS behavior, where it won't let you select a future time if a maximumDate was set.
hello, I'm closing this issue because the issue template was not fully followed and it is thus not clear if a bug is really present and how it can be reproduced (the code snippet at the top is not runnable).
On Android, min and max dates only work in date mode, not in time mode, as documented. If you're having this issue with time picker than this is the expected behavior at the moment because the native control does not support min and max dates and you'll have to implement such limits yourself based on your app's needs.
Thank you!
Most helpful comment
I'm seeing this bug on Android when using
mode="datetime"and settingmaximumDate={new Date()}.The date part of maximumDate works fine, but the time part allows a user to input a time hours in the future.
On iOS, everything works as expected.