1

I am using the react-native-modal-datetime-picker library and I am trying to use the display prop to display the calendar. If you look at my reproducible example found on snack expo here, you can see the issue I am having. I have also posted the code below.

The issue I am having is that when you hit 'Show Data Picker', you can see it renders this bottom modal with the current date. If you press the date, the calendar renders. How can I skip the first bottom modal that gets rendered? I just want to go straight to the calendar.

import React, { useState } from "react";
import { Button, View } from "react-native";
import DateTimePickerModal from "react-native-modal-datetime-picker";

const Example = () => {
  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);

  const showDatePicker = () => {
    setDatePickerVisibility(true);
  };

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

  const handleConfirm = (date) => {
    console.warn("A date has been picked: ", date);
    hideDatePicker();
  };

  return (
    <View style={{justifyContent: 'center', alignItems: 'center', flex: 1, backgroundColor: 'pink'}}>
      <Button title="Show Date Picker" onPress={showDatePicker} />
      <DateTimePickerModal
        isVisible={isDatePickerVisible}
        mode="date"
        onConfirm={handleConfirm}
        onCancel={hideDatePicker}
        display={"default"}
      />
    </View>
  );
};

export default Example;

The calendar I want, but without the bottom modal that renders, I want just the calendar. enter image description here

MouseWarrior
  • 391
  • 4
  • 19
  • I have gone through your problem statement and I can see that is not the issue as you can see the exact implementation for the same on the https://www.npmjs.com/package/react-native-modal-datetime-picker. – Manik Kumar Oct 10 '22 at 05:43
  • Could you clarify what you are saying please? I do not understand. Yes, I pulled my example from their readMe, and in both examples, the modal pops up. I do not want the first modal. – MouseWarrior Oct 10 '22 at 05:57
  • see since you have used this library https://www.npmjs.com/package/react-native-modal-datetime-picker that's why you are getting the modal with the current date like this only so you can use this library to fix your issue https://www.npmjs.com/package/react-native-datepicker. – Manik Kumar Oct 10 '22 at 06:02
  • I guess you need to change in library it self and use it as patch-package as [shown here](https://github.com/mmazzarolo/react-native-modal-datetime-picker/issues/557) – Hardik Chavda Oct 11 '22 at 12:56

1 Answers1

0

set display prop to inline instead of calendar

display={"inline"}

for more details see the documentation about this: here

Bhavya Koshiya
  • 1,262
  • 2
  • 8
  • 22
  • The first modal still pops up. Have you tried this in the expo? – MouseWarrior Oct 07 '22 at 05:16
  • Yes, i tried it in the expo link you provided – Bhavya Koshiya Oct 07 '22 at 05:18
  • So that is a different calendar than the one I need. If you set the display to "default", you can see the calendar I need. I will update the question – MouseWarrior Oct 07 '22 at 05:19
  • If you want the pre iOS 14 wheel based date picker, you should set `display={'spinner'}` instead of `inline`. – Kipnoedels Oct 08 '22 at 20:37
  • I need the calendar I refer to in the original post – MouseWarrior Oct 09 '22 at 23:17
  • @guts716 Display `inline` or `spinner` ARE the calenders you refer to in the original post. What other calender are you looking for. Do you have an image? I have tested them both on my device and they match with your Expo Snack. – Kipnoedels Oct 10 '22 at 09:53
  • inline and spinner both produce calendars that do not load the first modal, which is what I want. BUT the calendar that inline and spinner produces is visually a different calendar. I have updated my question to include a image of the calendar I want. In the image, you can see a bottom modal is rendered before the calendar. I do not want that first bottom modal to render. – MouseWarrior Oct 10 '22 at 14:25
  • @guts716 What you see is the modal from the library you are using. It’s built in. If you don’t want it just don’t use the package and instead use a different lib like https://docs.expo.dev/versions/latest/sdk/date-time-picker/ – Kipnoedels Oct 11 '22 at 09:21