Selecting date and time “together” in react native

问题

Now as DatePicker doesn't include TimePicker, I am inclined to use @react-native-community/datetimepicker. But as written in its documentation, it doesn't includes a feature with which user can select date and time together. This is the code given in their documentation:

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

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

  return (
    <View>
      <View>
        <Button onPress={showDatepicker} title="Show date picker!" />
      </View>
      <View>
        <Button onPress={showTimepicker} title="Show time picker!" />
      </View>
      {show && (
        <DateTimePicker
          testID="dateTimePicker"
          value={date}
          mode={mode}
          is24Hour={true}
          display="default"
          onChange={onChange}
        />
      )}
    </View>
  );

So with this, user will have to manually click to select time as well. What is want to do is that after selecting date, user is prompted to selected time as well and the datetime is stored in single string itself.

I cannot find any such way to accomplish this task. please help me to do this.

EDIT: This is what I am doing till now, but it is not working since it cannot select time:

<DatePicker
                    style={{flex: 2, marginRight: 20}}
                    date={this.state.date}
                    format=''
                    mode="datetime"
                    placeholder="select date and Time"
                    minDate="2017-01-01"
                    confirmBtnText="Confirm"
                    cancelBtnText="Cancel"
                    customStyles={{
                    dateIcon: {
                        position: 'absolute',
                        left: 0,
                        top: 4,
                        marginLeft: 0
                    },
                    dateInput: {
                        marginLeft: 36
                    }
                    // ... You can check the source to find the other keys. 
                    }}
                    onDateChange={(date) => {this.setState({date: date})}}
                />

回答1:

Try using the package react-native-date-picker with mode datetime. It supports selecting date and time together on both iOS and Android.

import DatePicker from 'react-native-date-picker'
...
<DatePicker
    date={date}
    onDateChange={setDate}
    mode="datetime"
/>

来源：https://stackoverflow.com/questions/65093088/selecting-date-and-time-together-in-react-native

标签

reactjs

react-native

datetimepicker