no option to close picker modal in iOS

[abhishek0705]

Hi there, Once user select the time from time picker then there is no option to close picker.

[SwikarBhattarai]

facing the same issue any fixes??

[abhishek0705]

You can close the picker by clicking on the button or you can open this picker in your own modal and there is one library that can resolve your issue

https://www.npmjs.com/package/react-native-modal-datetime-picker/v/7.6.1

[Vasault]

You can close the picker by clicking on the button or you can open this picker in your own modal and there is one library that can resolve your issue https://www.npmjs.com/package/react-native-modal-datetime-picker/v/7.6.1

click on the button? which button?

[abhishek0705]

By the one you are opening picker modal. You can use state variable to show or hide the modal

[running0x]

@abhishek0705 what state variable of the component handles 'show' and 'hide'?

[running0x]

It seems to me this component is entirely broken as you cannot choose a date and close the modal. There is no OK button. The only way to confirm your date is to click away from the modal on another part of the screen, which is usually a user behavior for dismissing a modal, not entering data.

Why is there no event I can send this component to end editing/close the date picker? Seems like it would be the most needed feature.

[Vasault]

who is giving dislikes? there is literally no button on modal for ios, my solution was to make my owns and set the variable there

[elilambnz]

It looks like the suggested solution was to wrap the spinner style datepicker in a modal to provide some extra controls for dismissing input. Unfortunately this solution isn't applicable to the new modal style picker in iOS 14 when using the default display.

As per this comment, this modal flow is actually correct. The picker is dismissed by clicking outside of the modal. If for some reason, having an additional button to close or confirm the picker is a hard requirement, I suggest you switch to a different display type such as spinner.

[alxvallejo]

@elilambnz That is unintuitive. A user would expect to select the date and have it close. Do we really expect users to know to select a date and the click outside the modal to close it? That is one too many taps..

[elilambnz]

@alxvallejo that seems to be a common opinion. Apple have decided to redesign the component this way, my guess is that iOS users are expected to adapt to the change.

Pro tip for implementing the iOS 14 design with this library, set an initial date upon opening the modal by wrapping the component in a <View>, as selecting today's date will not call onChange:

const handleDateSelection = (event, date) => {
  if (event.type) {
    switch (event.type) {
      // Handle dismissing the datepicker modal on Android
      case 'dismissed':
        setShow(false)
        return
      // Handle setting the currently selected value on Android
      case 'set':
        setShow(false)
        break
      default:
        return
    }
  }

  handleChange(date)
}

return (
  <View
    // Detect clicking the widget and if iOS set inital value, since selecting today's date
    // will not call onChange
    onTouchStart={() => isIos && handleChange(date)}
  >
    {// iOS uses a selectable widget which launhes a calendar modal
    // Android will show a calendar modal if the picker is rendered
    (isIos || show) && (
      <DateTimePicker
        mode='date'
        onChange={handleDateSelection}
        ...
      />
    )}
  </View>
)

[KyawSoeHein]

+1

[jayordway]

+1