React Native DateTimePicker: условная логика c Проблемы с отображением даты и времени - PullRequest
Новая
       16

React Native DateTimePicker: условная логика c Проблемы с отображением даты и времени

0 голосов
/ 08 января 2020

Небольшой обзор:

Я создал три состояния: appointmentDate (дата встречи), appointmentTime (время начала встречи), appointmentEndTime (время окончания встречи) .

И я пытался сделать каждое назначение уникальным, используя условие if-else. Например,

ЕСЛИ пользователь уже создает встречу (Встреча 1) со значениями, такими как:

appointmentDate: 20-01-2020 //date appointmentTime: 1:00pm //start time appointmentEndTime: 2:00pm //end time

ПОТОМУ, пользователь не может создать другую НОВУЮ НАЗНАЧЕНИЕ (Встреча 2) с одинаковым временем начала и окончания (то есть с 13:00 до 14:00 с одинаковой датой).

Для приведенного выше примера пользователь НЕ МОЖЕТ создать НОВОЕ назначение с этими значениями:

1. appointmentDate: 20-01-2020 //date appointmentTime: 1:00pm //start time appointmentEndTime: 2:00pm //end time

appointmentDate: 20-01-2020 //date appointmentTime: 1:30pm //start time appointmentEndTime: 2:30pm //end time

appointmentDate: 20-01-2020 //date appointmentTime: 1:31pm //start time appointmentEndTime: 1:59pm //end time

Пользователь должен выбрать РАЗНУЮ ДАТУ или РАЗЛИЧНОЕ ВРЕМЯ ВРЕМЕНИ ( время начала, время окончания) для создания Встречи 2.

Итак, моя проблема заключается в следующем:

  1. Во-первых, если я создаю назначение (назначение 1), например, с start time 5pm и end time 6pm, и если я пытаюсь создать другое назначение (назначение 2) с start time 4pm и end time 5pm, система не позволяет мне создать последнее назначение (т.е. встреча 2).
  2. Во-вторых, если я создаю встречу (встречу 1) с start time 10pm и end time 6pm ( время начала> время окончания ), приложение покажет сообщение об ошибке (или тост сообщение). В этом случае он работает так, как задумано, начиная с start time must always be less than end time. ОДНАКО, если я снова пытаюсь создать встречу с тем же start time 10pm, но с другим end time 11pm ( время начала <время окончания </em>), приложение все равно показывает то же сообщение об ошибке (которое время начала не может быть больше времени окончания , даже если это не так)

Итак, из вышеупомянутой проблемы, вот что я пытаюсь исправить и добиться:

  1. Возможность создания двух встреч, например (Встреча 1) с start time 4pm и end time 5pm, а затем создание другой встречи (Назначение 2) с start time 3pm и end time 4pm. Как правило, время начала и окончания второй встречи меньше времени начала и окончания первой встречи.

  2. Запретить пользователю создавать встречу в течение 1-часового интервала (или любой другой интервал времени между существующим временем начала и временем окончания уже существующей встречи. Если существующая встреча с 16:00 до 17:00, пользователь может создать встречу только до или после этого временного интервала (т. Е. Время начала должно быть равно или больше 17:00 (которое может иметь end time of 6pm) ИЛИ с временем окончания, равным или менее 16:00 (время начала 3 часа))

  3. START TIME всегда должно быть меньше END TIME. Например: start time: 4pm и end time: 3pm должны отображать сообщение об ошибке (или в этом случае всплывающее сообщение).

Ниже приведен фрагмент кода: 

constructor(props) {
    super(props);
    this.state = {
        //Date
        appointmentDate: new Date(moment()),
        modeAppointmentDate: 'date',
        showAppointmentDate: false,
        textAppointmentDate: moment().format('Do MMMM YYYY').toString(),

        //Time
        appointmentTime: new Date(moment()),
        appointmentEndTime: new Date(moment().add(1, 'hours')),

        modeAppointmentTime: 'time',
        modeEndTime: 'time',

        showAppointmentTime: false,
        showEndTime: false,

        textAppointmentTime: moment().format('h:mm a').toString(),
        textEndTime: moment().add(1, 'hours').format('h:mm a').toString(),

        //new timeSlots
        timeSlots: [],

        //new date, new start time, new end time
        initial_date: '',
        initial_start_time: '',
        initial_end_time: '',
    }
}

 addDateTimeAppt = () => {
    let self = this;

    self.setState({
        initial_date: self.state.appointmentDate,
        initial_start_time: self.state.appointmentTime,
        initial_end_time: self.state.appointmentEndTime,
    });

    let date = self.state.initial_date;
    let start_time = self.state.initial_start_time;
    let end_time = self.state.initial_end_time;

    if (start_time < end_time){
        if (date !== self.state.appointmentDate ||
            (
                (
                    start_time !== self.state.appointmentTime &&
                    start_time <= self.state.appointmentEndTime
                ) &&
                (
                    end_time !== self.state.appointmentEndTime &&
                    end_time <= self.state.appointmentTime
                )
            )
        ) {
            self.addAppointmentApi(); //add appointment
        } else {
            ToastAndroid.show('Sorry! Appointment Time already booked', ToastAndroid.SHORT);
        }
    } else {
        ToastAndroid.show('Invalid appointment time', ToastAndroid.SHORT);
    }
}
...