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

Posted 2023-02-19

【中文标题】如何在 React Native 中单独显示日期时间选择器？

【英文标题】：How to display separately date time picker in React Native?

【发布时间】：2020-06-08 17:38:14

【问题描述】：

我是 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'
  
)

【参考方案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"))
  

【讨论】：

我的男人。它运作良好。十分感谢你的帮助。祝你有美好的一天