picker

import React, { useState } from "react";
import { Button, Text, View, StyleSheet, TouchableOpacity } from "react-native";
import DateTimePickerModal from "react-native-modal-datetime-picker"; //install and import
import { SafeAreaView } from "react-native";


export const Picker = () => {

  const [selectedDate, setselectedDate] = useState("");
  const [selectedTime, setselectedTime] = useState("");

  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
  const [isTimePickerVisible, setTimePickerVisibility] = useState(false);

  const showDatePicker = () => {
    setDatePickerVisibility(true);
  };

  const hideDatePicker = () => {
    setDatePickerVisibility(false);
  };

  const showTimePicker = () => {
    setTimePickerVisibility(true);
  };

  const hideTimePicker = () => {
    setTimePickerVisibility(false);
  };

  const handleDate = (date) => {
    setselectedDate(date.toDateString());
    hideDatePicker();
  };


  const handleTime = (time) => {
    setselectedTime(time.toLocaleTimeString());
    hideTimePicker();
  };

  return (
      <SafeAreaView>
        <View style={styles.container}>
          <View>
            <Button title="Show Date Picker" onPress={showDatePicker} />
            <DateTimePickerModal
                isVisible={isDatePickerVisible}
                mode="date"
                onConfirm={handleDate}
                onCancel={hideDatePicker}
            />
          </View>
          <View>
            <Button title="Show Time Picker" onPress={showTimePicker} />
            <DateTimePickerModal
                isVisible={isTimePickerVisible}
                mode="time"
                onConfirm={handleTime}
                onCancel={hideTimePicker}
            />
          </View>
          <View>
            <Text>{selectedDate}</Text>
            <Text>{selectedTime}</Text>
          </View>
        </View>
      </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingTop: 300,
  },
});