Lagging when change date and time on iPhone

Question

Using iPhone: - Issue (only for iPhone)

In the Date & Time of Appointment, after clicking the calendar icon then it will lag when changing Date/Time. Another phone (Android) should be no problem, only iPhone cannot work. I am using this template https://keenthemes.com/metronic/ to create my project and create datetime function.

Below is my coding:

Datetime code

<Form.Group>
<Form.Label>
  <FormattedMessage id="GENERAL.DATE_TIME_APPOINTMENT" />
</Form.Label>
<MuiPickersUtilsProvider utils={MomentUtils}>
  <KeyboardDateTimePicker
    className="form-control"
    value={formatDateTimeStringAsDateTime(selectedDate)}
    onChange={handleDateChange}
    name="appointmentDate"
    minDate={new Date()}
    format={SAASDateTimeFormat}
    margin="dense"
  />
</MuiPickersUtilsProvider>
</Form.Group>

MomentUtils

export default class MomentUtils implements IUtils<defaultMoment.Moment> {
    moment: typeof defaultMoment;
    locale?: string;
    yearFormat: string;
    yearMonthFormat: string;
    dateTime12hFormat: string;
    dateTime24hFormat: string;
    time12hFormat: string;
    time24hFormat: string;
    dateFormat: string;
    constructor({ locale, instance, moment }?: Opts);
    parse(value: string, format: string): defaultMoment.Moment;
    date(value?: any): defaultMoment.Moment;
    isValid(value: any): boolean;
    isNull(date: Moment): boolean;
    getDiff(date: Moment, comparing: Moment | string): number;
    isAfter(date: Moment, value: Moment): boolean;
    isBefore(date: Moment, value: Moment): boolean;
    isAfterDay(date: Moment, value: Moment): boolean;
    isBeforeDay(date: Moment, value: Moment): boolean;
    isBeforeYear(date: Moment, value: Moment): boolean;
    isAfterYear(date: Moment, value: Moment): boolean;
    startOfDay(date: Moment): defaultMoment.Moment;
    endOfDay(date: Moment): defaultMoment.Moment;
    format(date: Moment, formatString: string): string;
    formatNumber(numberToFormat: string): string;
    getHours(date: Moment): number;
    addDays(date: Moment, count: number): defaultMoment.Moment;
    setHours(date: Moment, count: number): defaultMoment.Moment;
    getMinutes(date: Moment): number;
    setMinutes(date: Moment, count: number): defaultMoment.Moment;
    getSeconds(date: Moment): number;
    setSeconds(date: Moment, count: number): defaultMoment.Moment;
    getMonth(date: Moment): number;
    isSameDay(date: Moment, comparing: Moment): boolean;
    isSameMonth(date: Moment, comparing: Moment): boolean;
    isSameYear(date: Moment, comparing: Moment): boolean;
    isSameHour(date: Moment, comparing: Moment): boolean;
    setMonth(date: Moment, count: number): defaultMoment.Moment;
    getMeridiemText(ampm: "am" | "pm"): "AM" | "PM";
    startOfMonth(date: Moment): defaultMoment.Moment;
    endOfMonth(date: Moment): defaultMoment.Moment;
    getNextMonth(date: Moment): defaultMoment.Moment;
    getPreviousMonth(date: Moment): defaultMoment.Moment;
    getMonthArray(date: Moment): defaultMoment.Moment[];
    getYear(date: Moment): number;
    setYear(date: Moment, year: number): defaultMoment.Moment;
    mergeDateAndTime(date: Moment, time: Moment): defaultMoment.Moment;
    getWeekdays(): string[];
    isEqual(value: any, comparing: any): boolean;
    getWeekArray(date: Moment): defaultMoment.Moment[][];
    getYearRange(start: Moment, end: Moment): defaultMoment.Moment[];
    getCalendarHeaderText(date: Moment): string;
    getYearText(date: Moment): string;
    getDatePickerHeaderText(date: Moment): string;
    getDateTimePickerHeaderText(date: Moment): string;
    getMonthText(date: Moment): string;
    getDayText(date: Moment): string;
    getHourText(date: Moment, ampm: boolean): string;
    getMinuteText(date: Moment): string;
    getSecondText(date: Moment): string;
}

handleChange

const handleDateChange = (e) => {
    setSelectedDate(e);
    setApptCheckingStartDate(e);
    setEndTime(e);
    setDurationHour("0");
    setDurationMinute("0");
  };

selectedDate value is fetching today's date.

This is my video to show how lagging in the select DateTime in the iPhone. https://drive.google.com/file/d/1v4Aw7_ihS7M3Y40Rr3gY3OCHnqmR0rSG/view?usp=sharing

Anyone can help me on how to solve this problem so let the iPhone can be avoided the lagging issue for select DateTime? Thanks.

Lagging when change date and time on iPhone

0 Answers0