Get the reset and done button for the calendar ios

[vseverestek]

Question

Is there a way to achieve the below. Using "@react-native-community/datetimepicker": "^7.3.0", "react-native": "0.70.1", I require the reset and done buttons that I see on websites when using my iPhone. Using this library, I require the same thing.

This is what I have right now

[gusgushz]

It looks like there's a new package (https://www.npmjs.com/package/react-native-modal-datetime-picker) that solves this, however if you are like me and don't want to download another package, you can do it by yourself. This is how i did it: ` import React, { useState } from 'react'; import { Modal, Platform, Pressable, Text, TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native'; import DateTimePicker, { DateTimePickerAndroid, DateTimePickerEvent } from '@react-native-community/datetimepicker'; import globalStyles from '../styles/globalStyles';

interface CalendarProps { date: Date; setDate: (date: Date) => void; minDate?: Date; }

export const Calendar: React.FC<CalendarProps> = ({ date, setDate, minDate }) => { const [show, setShow] = useState(false); const [selectedDate, setSelectedDate] = useState<Date>() const options: Intl.DateTimeFormatOptions = { day: '2-digit', month: '2-digit', year: 'numeric' };

const onChange = (event: DateTimePickerEvent, selectedDate?: Date) => { const currentDate = selectedDate || date; setSelectedDate(currentDate); };

const handleCancel = () => { setDate(date); setShow(false); };

const handleConfirm = () => { setDate(selectedDate ?? date); setShow(false); };

if (Platform.OS === 'android') { const showDatepicker = () => { DateTimePickerAndroid.open({ value: date, onChange, mode: 'date', minimumDate: minDate ?? new Date(), }); };

return (
  <>
    <Pressable
      style={{
        borderBottomWidth: 1,
        borderColor: 'black',
        padding: 10,
        marginBottom: 8,
      }}
      onPress={() => {
        showDatepicker();
      }}>
      <Text style={[globalStyles.txtR, { color: '#FF7F00' }]}>{date.toLocaleDateString('es-ES', options)}</Text>
    </Pressable>

    {show && (
      <Modal animationType="fade" transparent={true} visible={show} onRequestClose={() => setShow(false)}>
        <TouchableWithoutFeedback onPress={() => setShow(false)}>
          <View
            style={{
              flex: 1,
              justifyContent: 'center',
              alignItems: 'center',
            }}></View>
        </TouchableWithoutFeedback>
      </Modal>
    )}
  </>
);

} else { return <> <Pressable style={{ borderBottomWidth: 1, borderColor: 'black', padding: 10, marginBottom: 8, }} onPress={() => { setShow(true); }}> <Text style={[globalStyles.txtR, { color: '#FF7F00' }]}>{date.toLocaleDateString('es-ES', options)}</Text> </Pressable>

  {show && (
    <Modal animationType="fade" transparent={true} visible={show} onRequestClose={handleCancel}>
      <TouchableWithoutFeedback onPress={handleCancel}>
        <View style={{ flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.5)', justifyContent: 'center', alignItems: 'center', }}>
          <View style={{backgroundColor:"white", overflow:'hidden', borderRadius: 8 }}>
            <DateTimePicker
              locale="es-ES"
              minimumDate={minDate ?? new Date()}
              testID="dateTimePicker"
              value={date}
              mode="date"
              onChange={onChange}
              accentColor='#FF7F00'
              display='inline'
              textColor='red'
            />
            <TouchableWithoutFeedback>
              <View style={{flexDirection:'row-reverse', padding: 12, borderTopColor: 'lightgrey', borderTopWidth: 2, justifyContent:"space-between"}}>
                <TouchableOpacity hitSlop={12} onPress={handleConfirm}>
                  <Text style={{fontSize: 16, fontWeight: 'bold', color: '#FF7F00' }}>Aceptar</Text>
                </TouchableOpacity>
                <TouchableOpacity hitSlop={12} onPress={handleCancel}>
                  <Text style={{fontSize: 16, color: '#FF7F00' }}>Cancelar</Text>
                </TouchableOpacity>
              </View>
            </TouchableWithoutFeedback>
          </View>
        </View>
      </TouchableWithoutFeedback>
    </Modal>
  )}
</>;

} }; ` In my case, im using the Modal from react native to show the datepicker depending if it´s an android or ios device. And it looks like this on ios: I hope this helps you.