Как использовать пакет Date Time Picker в React Native.

Привет всем, возможно, у друзей все еще есть проблемы с реализацией пакета выбора даты и времени в проекте, который мы делаем, в этом случае я поделюсь своим опытом реализации пакета выбора даты и времени в проекте, который я делаю.

Что нам нужно, так это первый шаг:

1. Откройте свой терминал в проекте, а затем установите его с помощью приведенной ниже команды.

npm install @react-native-community/datetimepicker --save

or

yarn add @react-native-community/datetimepicker

2. второй шаг — импорт в приведенную ниже команду.

import DateTimePicker from '@react-native-community/datetimepicker'

3. Для более полного кода есть.

import DateTimePicker from '@react-native-community/datetimepicker'

const App = () => {
  const [datePicker, setDatePicker] = useState(false);

  const [date, setDate] = useState(new Date());

  const [timePicker, setTimePicker] = useState(false);

  const [time, setTime] = useState(new Date(Date.now()));

  function showDatePicker() {
    setDatePicker(true);
  }

  function showTimePicker() {
    setTimePicker(true);
  }

  function onDateSelected(event, value) {
    setDate(value);
    console.log(value);
    setDatePicker(false);
  }

  function onTimeSelected(event, value) {
    setTime(value);
    setTimePicker(false);
  }

  return (
    <View>
      <Text style={styleSheet.text}>Date ={date.toLocaleDateString()}</Text>
      <Text style={styleSheet.text}>
        Time = {time.getHours()} : {time.getMinutes()}
      </Text>

      {/* <DateandTime /> */}
      {datePicker ? (
        <DateTimePicker
          value={date}
          mode={'date'}
          display={'calendar'}
          is24Hour={true}
          onChange={onDateSelected}
          onTouchCancel={() => setDatePicker(false)}
          style={styleSheet.datePicker}
        />
      ) : (
        console.log('asdsa')
      )}

      {/* {timePicker ? (
        <DateTimePicker
          value={time}
          mode={'time'}
          display={'default'}
          is24Hour={false}
          onChange={onTimeSelected}
          style={styleSheet.datePicker}
        />
      ) : (
        <></>
      )} */}
      <View style={{marginBottom: 20}}>
        <Button title="date" onPress={() => showDatePicker()} />
      </View>
      <Button title="Time" onPress={() => showTimePicker()} />
    </View>
  );
};

const styleSheet = StyleSheet.create({
  text: {
    fontSize: 25,
    color: 'red',
    padding: 3,
    marginBottom: 10,
    textAlign: 'center',
  },

  // Style for iOS ONLY...
  datePicker: {
    justifyContent: 'center',
    alignItems: 'flex-start',
    width: 320,
    height: 260,
    display: 'flex',
  },
});
export default App;

Будем надеяться, что трудности, с которыми сейчас сталкиваются друзья, могут быть решены.

Предупреждение…!!!

это только андроид