farhoudshapouran/react-native-ui-datepicker

the 'date' param of 'onChange' is not a javascript Date object

Opened this issue · 6 comments

Would returning a standard JavaScript Date type instead of dayjs object be more appropriate? Otherwise, it could be unintuitive and inconvenient for users who don't use the dayjs library(they have to use param.date.toDate() which is not mentioned in the document)

And I also found that when set timePicker=true, the param.date of onChange is a string? These behaviors are inconsistent, unintuitive and inconvenient. Is it designed this way for some reason?

@YaoHuiJi I had the same thought, I want to use this library but the only thing turning me away is the dependency on DaysJS. The standard Date object in Javascript should be the date object used.

It would be interesting if the onChange output was a javascript Date object, or at least sent as another parameter.

Can the project maintainers discuss this? It would be great to hear their opinion on this.

It seems to be possible to use the Date object with this little workaround

function DatePickerModal({
	modal: { getParam },
}: ModalProps<"DatePickerModal">) {
  const defaultDate = getParam("date");
  const [selectedDate, setSelectedDate] = useState(defaultDate ?? new Date());

  return (
     <DefaultContainer variant="modal">
	<DateTimePicker
            onChange={({ date }) => {
              setSelectedDate(new Date(date as string));
            }}
           date={selectedDate}
           mode="single"
           locale="pt-br"
         />

       <Button>Confirmar</Button>
    </DefaultContainer>
    );
}

export default DatePickerModal;

couldnt you just do onChange={(params: {date: DateType}) => setDate(params.date as Date)}? Works for me

@ronKovler that won't be a good idea as DateType and Date are not the same object, you would instead need to fully convert DateType to a Date by instantiating Date with a string representation of the full date from DateType.

MoOx commented

Using TypeScript, a safe way to get a Date object is to do the following

onChange={({ date }) => {
  if (date && typeof date === "object" && "toDate" in date) {
    const d = date.toDate();
    console.log("change", d);
  }
}}

This should be in doc for sure.