Datetimepicker: Android minimumDate and maximumDate not working

Created on 10 Jan 2020  Â·  11Comments  Â·  Source: react-native-datetimepicker/datetimepicker

Bug

DateTimePicker ignores minimumDate and maximumDate properties. On IOS it works fine.
As a workaround any logic can be done inside onChange

Environment info

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

Reproducible sample code

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);
            }
          }
        }}
      />
    );
  }

Most helpful comment

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.

All 11 comments

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

https://github.com/react-native-community/datetimepicker/blob/58218994a599232dedee80762373c56429585082/src/datetimepicker.android.js#L47

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 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

https://github.com/react-native-community/datetimepicker/blob/58218994a599232dedee80762373c56429585082/src/datetimepicker.android.js#L47

yes , I also faced the same problem

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
https://github.com/react-native-community/datetimepicker/blob/58218994a599232dedee80762373c56429585082/src/datetimepicker.android.js#L47

yes , 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!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

wesff picture wesff  Â·  3Comments

yesIamFaded picture yesIamFaded  Â·  5Comments

gabrieljablonski picture gabrieljablonski  Â·  5Comments

ArturDabrowski picture ArturDabrowski  Â·  3Comments

RoTTex picture RoTTex  Â·  3Comments