允许 React-Native-DateTimePicker 的空值

Question

我有一个带有用于输入数据的表单的 React Native 应用程序。其中一个字段是 DateTime 值，但它是可选的。换句话说，如果用户想要日期，可以选择日期，但如果字段不相关，则可以保留 blank/null。

但是，当我将 null 分配给 DateTimePicker 的日期属性时，我得到一个异常，即 null 不是一个对象。如何允许用户选择日期（如果他们愿意），但如果他们不想在该字段中输入日期，则将其保留为“空”。

     <DateTimePicker
      isVisible={isDatePickerVisible}
      mode={mode}
      onConfirm={handleConfirm}
      onCancel={hideDatePicker}
      date={selectedDate}
      onBlur={onBlur}
    />

有没有属性我遗漏了？我可以使用其他组件来完成此操作吗？

Answer 1

注意

Please note that this library currently exposes functionality from UIDatePicker on iOS and DatePickerDialog + TimePickerDialog on Android, and CalendarDatePicker +TimePicker on Windows.

These native classes offer only limited configuration, while there are dozens of possible options you as a developer may need. It follows that if your requirement is not supported by the backing native views, this library will not be able to implement your requirement. When you open an issue with a feature request, please document if (or how) the feature can be implemented using the aforementioned native views. If those views do not support what you need, such feature requests will be closed as not actionable.

如 react-native-datetimepicker 文档中所提供。

您正在使用的date道具就是其中之一。对于 iOS 它公开了一个 UIDatePicker 的字段，即

The initial date that the date picker will display. Defaults to the current date, but you can set a custom value. This attribute is equivalent to setting the date property programmatically.

但是，如 react-native-datetimepicker文档中所述，它的使用是有限的。我们需要使用的正确道具是 value 道具 which

Defines the date or time value used in the component.

此字段为必填项。我们不能取消它。总会有一些默认值需要在初始时明确设置。

但是，您可以通过不同的方式实现您想要实现的目标。您需要在表单的状态下自己处理表单值。因此，

const [date, setDate] = useState()

您表单中的状态 date 最初是未定义的。你的 DateTimePicker 的 value 道具不是。

DateTimePicker 获得 onConfirmMethod。如果被触发，将你的 date 状态设置为传递给 onConfirmMethod 的 value 道具，如下所示

const onConfirm = (selectedDate) => {
    setDate(selectedDate)
}

<DateTimePicker
      isVisible={isDatePickerVisible}
      mode={mode}
      onConfirm={onConfirm}
      onCancel={hideDatePicker}
      value={date}
      onBlur={onBlur}
/>
}

通常您希望用户允许之后删除该字段。你需要自己实现这个，因为 value 不能取消设置。如果所选 date 在某种 InputField 中可视化，那么这很容易完成。

您的表单数据随后与您的 DateTimePicker 价值支柱分离。恐怕没有其他办法，至少有了这个图书馆。

Answer 2

感谢@david-scholz 深入了解 react-native-datetimepicker 库和缺少空支持。话虽如此，他的回答并未提供所要求的功能。

我设法使用包装 react-native-modal-datetimepicker 库的自定义组件来实现它。基本思想是仅当用户想要选择日期时才使用选择器。

要做到这一点：

文本用于显示当前值或“未选择日期”。
当用户点击文本时，会显示日期时间选择器让他们select一个日期
如果用户想要清除日期并返回到空，有一个按钮可以点击

注意：这是为了与 Formik 一起使用（在我的用例中），因此传回的日期/时间值是字符串格式（与 Formik 一起使用效果更好）。

这是代码，以防任何人都可以使用它。它应该被视为麻省理工学院许可证。

import React, { useState } from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import moment from 'moment';

const isNullOrWhitespace = ( input ) => {
  return !input || !input.trim();
}

export default function NullableDatePicker (props) {
    const {value, onChange, onBlur} = props;
    const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
    const [selectedDate, setSelectedDate] = useState(isNullOrWhitespace(value) ?  new Date() : new Date(value));
    const [hasDate, setHasDate] = useState(isNullOrWhitespace(value) ? false : true);

    const showDatePicker = () => {
      setDatePickerVisibility(true);
    };
  
    const hideDatePicker = () => {
      setDatePickerVisibility(false);
    };
  
    const handleConfirm = date => {
      hideDatePicker();
      setHasDate(true);
      setSelectedDate(new Date(date));  
      onChange(valueToString(date));
    };
  
    const valueToString = selectedDate => {
        return moment(selectedDate).format('YYYY-MM-DD');
    }

    const clearDate = () => {
        setHasDate(false);
        onChange('');
    }
  
    return (
      <View>
        <View style={styles.fixToText}>
        <Text style={styles.dateText} onPress={showDatePicker}>{hasDate ? valueToString(selectedDate) : 'No Date Selected'}</Text>
        <Text>   </Text>
        <TouchableOpacity 
            title="Clear"
            onPress={() => clearDate()}
            disabled={!hasDate}
            style={styles.button}
        >
           <Text>Clear</Text> 
        </TouchableOpacity>
        </View>
        <DateTimePickerModal
          isVisible={isDatePickerVisible}
          mode='date'
          onConfirm={handleConfirm}
          onCancel={hideDatePicker}
          date={selectedDate}
          onBlur={onBlur}
        />
      </View>
    );  
  }
  const styles = StyleSheet.create(
      {
        fixToText: {
            flexDirection: 'row'
        },
        button: {
            alignItems: "center",
            backgroundColor: "lightblue",
            padding: 5,
            height: 30,
            width: 50
        },
        dateText:{
            height: 30,
            textAlignVertical: 'center'
        }
      }
  )

允许 React-Native-DateTimePicker 的空值

Allowing Null Value for React-Native-DateTimePicker

reactjs

react-native

react-native-datetimepicker