Open & Close Calendar By DatePicker Ref

[aminmousavi5147]

I want to open datepicker manually and here is my code: const datePickerRef = useRef(); ... <DatePicker ref={datePickerRef} > ... </DatePicker> <IonButton onClick={() => datePickerRef.current.openCalendar()}> Click </IonButton > The problem is that I get this error on datePickerRef.current : "Object is possibly 'undefined'"

[shahabyazdi]

If you are using typescript replace const datePickerRef = useRef(); with const datePickerRef = useRef<any>(); and if you want to make sure that the object isn't undefined, put datePickerRef.current.openCalendar() in an if statement.

if(datePickerRef.current){
   datePickerRef.current.openCalendar()
}

[aminmousavi5147]

Thank you for your help. There is another problem! I have a component called MyDatepicker.tsx, my problem is that when I change date without pressing confirm button, and after that I press today button, today button won't work but if I change date and press confirm and reopen datepicker, today button will work. Actually I'm not sure if it's today button that is not working or the onChange event! Please look at this image

The value in console_log is the date value before and after pressing today and confirm buttons.

As you can see I changed the date and confirmed but the value (console_log) is still the same. It should be "Tue Nov 30 2021 ....". I hope you get my problem :)

Here is MyDatepicker.tsx.

import React, { useState } from 'react'; import { IonIcon } from '@ionic/react'; import { calendarOutline } from 'ionicons/icons'; import './MyDatepicker.css'; import DatePicker from "react-multi-date-picker"; import gregorian from "react-date-object/calendars/gregorian"; import gregorian_en from "react-date-object/locales/gregorian_en"; import persian from "react-date-object/calendars/persian"; import persian_fa from "react-date-object/locales/persian_fa"; import "react-multi-date-picker/styles/layouts/mobile.css";

const MyDatepicker: React.FC<{ isRange: boolean }> = props => { const [state, setState] = useState({ dateValue: new Date(), calendar: persian, locale: persian_fa, switchLabel: 'میلادی', todayLabel: 'امروز', fontClass: '', toggle: true }) const SwitchCalendar = () => { state.toggle ? setState({ ...state, calendar: gregorian, locale: gregorian_en, switchLabel: 'شمسی', todayLabel: 'Today', fontClass: 'font-tahoma', toggle: false }) : setState({ ...state, calendar: persian, locale: persian_fa, switchLabel: 'میلادی', todayLabel: 'امروز', fontClass: '', toggle: true }); } // console.log(state.dateValue); return ( <div className="my-datepicker"> <DatePicker value={state.dateValue} onChange={() => setState({...state, dateValue: state.dateValue})} calendar={state.calendar} locale={state.locale} minDate={new Date()} className={"rmdp-mobile " + state.fontClass} inputMode="none" range={props.isRange} > <div className="datepicker-custom-btns"> <button className="datepicker-switch-btn font-iranyekan" onClick={SwitchCalendar}> {state.switchLabel} </button> <button className="datepicker-today-btn" onClick={() => setState({...state, dateValue: new Date()})}> {state.todayLabel} </button> </div> </DatePicker> <IonIcon icon={calendarOutline} className="datepicker-icon" /> </div> ); }; export default MyDatepicker;

[shahabyazdi]

It seems to be a bug and needs to be fixed. But unfortunately, it is not possible for me to fix this bug for another 8 days.

[aminmousavi5147]

OK, no problem! Fortunately, I'm not in a hurry so let us now when you fixed it :)

[shahabyazdi]

I have published a new version (3.3.0) and I hope your issue has been solved by installing it.