如何在 React Native 中单独显示日期时间选择器？

Question

我是 React Native 的新手，在单独显示日期和时间选择器方面遇到了困难

我使用 npm 包：react-native-modal-datetime-picker

在代码中：我试图分别显示所选的开始日期和结束日期。但是，我对这两个参数只使用一个函数。而当我颠倒handleConfirm() 中的2 个参数的顺序时，它会反向工作。 请帮助并随时调整我在 JS 中的知识:)))

This is the clip showing it doesn't work correctly

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'
  }
})

Answer 1

DateTimePickerModal 来自包 react-native-modal-datetime-picker 需要一个函数 onConfirm，它接受单个日期参数，如 example usage documentation 所示。您正在传递一个函数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"))
  }
}