Как отдельно отобразить указатель даты и времени в React Native? - PullRequest
Новая
       40

Как отдельно отобразить указатель даты и времени в React Native?

1 голос
/ 25 февраля 2020

Я новичок ie в React Native и изо всех сил пытаюсь отобразить средство выбора даты и времени отдельно

Я использую пакет npm: Reaction-native-modal-datetime-picker

В коде: я пытаюсь отобразить выбранный день начала и день окончания отдельно. Однако я использую только одну функцию для этих двух параметров. И когда я изменяю порядок 2 параметров в handleConfirm(), он работает обратно. Пожалуйста, помогите и не стесняйтесь отрегулировать мои знания в JS:)))

Этот клип показывает, что он не работает правильно 

import React, { useState } from 'react'
import {
  View,
  Button,
  StyleSheet,
  TouchableOpacity,
  Text
} from 'react-native'
//import DateTimePicker from '@react-native-community/datetimepicker';
import DateTimePickerModal from "react-native-modal-datetime-picker";
import  moment from 'moment'

const DateTimeScreen = () => {
  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
  const [mode, setMode] = useState('date');
  const [chosenMode, setChosenMode] = useState(null)  // chosenMode: true ? startDay : endDay

  const [chosenStartDate, setChosenStartDate] = useState(moment().format("MMM Do YY"))
  const [chosenEndDate, setChosenEndDate] = useState(moment().format("MMM Do YY"));

  const showMode = (currentMode) => {
    setDatePickerVisibility(true);
    setMode(currentMode);
  }

  const showTimePicker = () => {
    showMode('time')
  };

  const showDatePicker = () => {
    showMode('date')
  };

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

  const handleConfirm = (endDate, startDate) => { 
    /* when I try to reverse the order of parameters in this function, 
    the starting day button works but ending day doesn't and vice versa */
    hideDatePicker();
    if(chosenMode){
      setChosenStartDate(moment(startDate).format("MMM Do YY"))  
    }else{
      setChosenEndDate(moment(endDate).format("MMM Do YY"))
    }
  }


  return (
    <View>
      <Button title="Starting day" onPress={() => {
        setChosenMode(true);
        showDatePicker();
      }} />
      <Button title="Ending day" onPress={() => {
        setChosenMode(false);
        showDatePicker();
      }} />
      <Button title="Starting time" onPress={showTimePicker} />
      <Button title="Ending time" onPress={showTimePicker} />
      {isDatePickerVisible && (
        <DateTimePickerModal
        isVisible={isDatePickerVisible}
        mode={mode}
        onConfirm={handleConfirm}
        onCancel={hideDatePicker}
      />
      )}
      <Text>Stating day: {chosenStartDate}</Text>
      <Text>Ending day: {chosenEndDate}</Text>
    </View>
  );
};

export default DateTimeScreen;

const styles = StyleSheet.create({
  container:{
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  overlay:{
    flex: 1,
    justifyContent: 'center'
  }
})

1 Ответ

1 голос
/ 25 февраля 2020

DateTimePickerModal из пакета react-native-modal-datetime-picker ожидает функцию onConfirm, которая принимает один параметр даты, как видно из их примера документации по использованию . Вы передаете функцию handleConfirm, которая ожидает два параметра даты. Когда вы нажимаете «Подтвердить» на модальном и вызывается handleConfirm, только первый предоставленный вами параметр будет заполнен датой.

Правильный подход - написать вашу функцию handleConfirm так, чтобы она использовала только один параметр даты: 

/* Notice there's only one `date` parameter */
const handleConfirm = (date) => {
  hideDatePicker();
  if(chosenMode){
    /* Here, use the same date in both branches of the if statement */
    setChosenStartDate(moment(date).format("MMM Do YY"))  
  }else{
    /* `date` is used again */
    setChosenEndDate(moment(date).format("MMM Do YY"))
  }
}
...