Question 33509 in React native Question posted in
The official React Native documentation can be found here.

how to open and set date in Textinput field in react native – datepicker

This is what I am trying. On focus of TextInput datepicker does get open but after selecting date it is not getting populated in TextInput field.
Where I am making mistake?

<TouchableOpacity>
  <TextInput style={styles.textinputstyle} onFocus={()=>{setOpen(true)}} />
</TouchableOpacity>
<DatePicker modal mode="date" dateFormat="MM-DD-YYYY" open={open} date={date} onConfirm={date=> { setOpen(false) setDate(date) }} onCancel={() => { setOpen(false) }} />
Tags:

2

Answers


  1. 0

    set editable = false in TextInput

     const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
  const [birthDate, setBirthDate] = useState('');

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

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

  const handleConfirm = date => {
    setBirthDate(date);
    hideDatePicker();
  };

 <TouchableOpacity onPress={showDatePicker}>
          <TextInput
            numberOfLines={1}
            editable={false}
            placeholder="Choose Your Date of Birth"
            value={moment(birthDate).format('DD MMMM, YYYY')}
            style={{
              fontSize: 16,
              paddingVertical: 10,
              color: 'black',
            }}
          />
          <DateTimePickerModal
            isVisible={isDatePickerVisible}
            maximumDate={new Date(moment().add(-1, 'days'))}
            mode="date"
            onChange={date => setBirthDate(date)}
            value={handleConfirm}
            onConfirm={handleConfirm}
            onCancel={hideDatePicker}
          />
        </TouchableOpacity>
    Login or Signup to reply.
  2. 0 
    import React, { useState,useEffect } from 'react';
import {
    Text,
    View,
    StyleSheet,
    TextInput,
    SafeAreaView,
    ScrollView,
    FlatList,
    TouchableOpacity,
} from 'react-native';
import RNCalendarEvents from 'react-native-calendar-events';
import DatePicker from 'react-native-date-picker';
import { openDatabase } from 'react-native-sqlite-storage';


const db = openDatabase({
    name: "calendar",
});


const Main = ({ navigation }) => {
    const [eventTitle, setEventTile] = React.useState('');
    const [eventLocation, setEventLocation] = React.useState('');
    const [date, setDate] = React.useState(new Date());
    const [open, setOpen] = React.useState(false);
    const [dateValue, setdateValue] = React.useState('');
    const [name, setName] = useState();
    const [location, setLocation] = useState();
    const [time, setTime] = useState();
    const [id, setId] = useState();
    const [categories, setCategories] = useState([]);

    const addCategory = () => {
        //if (!category||!adddescription||!adddata)
        if (name.length == 0 || location.length == 0 || time.length == 0) {
            alert("Enter category");
            return false;
        }
    useEffect(async () => {
        //let interval = setInterval(() => setTime(1), 1000)

        await createTables();
        await getCategories();
        // return () => {
        //     clearInterval(interval);
        // }
    }, []);

    React.useEffect(() => {
        RNCalendarEvents.requestPermissions()
            .then(res => {
                console.log('Premission Response', res);
            })
            .catch(error => {
                console.log(error);
            });
    }, []);

    const createEvent = () => {
        const newDate = new Date(date);
        newDate.setHours(newDate.getHours() + 2);

        RNCalendarEvents.saveEvent(eventTitle, {
            calendarId: '3',
            startDate: date.toISOString(),
            endDate: newDate.toISOString(),
            location: eventLocation
        }).then((value) => {
            console.log('Event Id--->', value);
            setId(value)
            console.log("Event Data-->", name);
            console.log("Event Data-->", location);
            console.log("Event time-->", time);


        }).catch((error) => {
            console.log(' Did Not work Threw an error --->', error)
        })

    }

    function submit() {
        const newDate = new Date(date);
        newDate.setHours(newDate.getHours() + 2);

        RNCalendarEvents.saveEvent(eventTitle, {
            calendarId: '3',
            startDate: date.toISOString(),
            endDate: newDate.toISOString(),
            location: eventLocation
        }).then((value) => {
            console.log('Event Id--->', value);
            setId(value)
            console.log("Event Data-->", name);
            console.log("Event Data-->", location);
            console.log("Event time-->", time);
            addCategory();
        //    navigation.navigate("RootScreen")

        }).catch((error) => {
            console.log(' Did Not work Threw an error --->', error)
        })
    }


    const renderItem = ({ item }) => (
        <Text style={styles.title}>{name}</Text>
    );

    return (
        <View style={styles.container}>
            <ScrollView>

                <View style={styles.mainContainer}>
                    <View style={styles.singleElement}>
                        <View style={styles.dateInputContainer}>
                            <TextInput value={dateValue} style={styles.dateInput} />

                            <TouchableOpacity
                                style={styles.dateIcon}
                                onPress={() => setOpen(true)}>
                                <Text> SELECT DATA/TIME </Text>
                            </TouchableOpacity>

                            <DatePicker
                                modal
                                open={open}
                                date={date}
                                onConfirm={date => {
                                    var currentdate = new Date(date);
                                    var datetime =
                                        +currentdate.getDate() +
                                        '/' +
                                        (currentdate.getMonth() + 1) +
                                        '/' +
                                        currentdate.getFullYear() +
                                        ' - ' +
                                        currentdate.getHours() +
                                        ':' +
                                        currentdate.getMinutes();

                                    setOpen(false);
                                    setDate(date);
                                    setTime(date);
                                    setdateValue(datetime.toString());
                                }}
                                minimumDate={new Date()}
                                onCancel={() => {
                                    setOpen(false);
                                }}
                            />
                        </View>
                    </View>
                </View>

                <TouchableOpacity
                    style={{
                        flex: 2,
                        padding: 25,
                        height: 72,
                        justifyContent: 'center',
                        alignSelf: 'center',
                    }}
                    onPress={() => submit()}

                >
                    <Text> Save Event </Text>
                </TouchableOpacity>

            </ScrollView>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f4f4fc',
        marginTop: 50,
    },
    mainContainer: {
        display: 'flex',
        flexDirection: 'row',
        padding: 10,
    },

    singleElement: {
        display: 'flex',
        flex: 4,
        flexDirection: 'column',
    },

    textInputContainer: {
        display: 'flex',
        flexDirection: 'column',
        padding: 15,
        backgroundColor: '#fff',
        borderRadius: 15,
        marginBottom: 1,
    },

    dateInputContainer: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff',
        padding: 15,
        borderRadius: 15,
        marginBottom: 1,
        margin: 2,
    },

    dateIcon: {
        padding: 10,
    },
});

export default Main;

    This will help you

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search