Home / Questions / 536183
Accepted
Giovanny
Asked: 2022-07-25 05:42:54 +0800 CST 2022-07-25 05:42:54 +0800 CST

Show in an input the selected date Date Picker - React Native

  • 772

I have a datepicker from the npm plugin i react-native-date-picker and it works without problems but I need that when selecting the date it returns the date that I select in the input field but I have not been able to do it.

import React, { useState } from 'react'
import { Button } from 'react-native'
import DatePicker from 'react-native-date-picker'

export default () => {
  const [date, setDate] = useState(new Date())
  const [open, setOpen] = useState(false)

  return (
    <>
      <Button title="Open" onPress={() => setOpen(true)} />
      <DatePicker
        modal
        open={open}
        date={date}
        onConfirm={(date) => {
          setOpen(false)
          setDate(date)
        }}
        onCancel={() => {
          setOpen(false)
        }}
      />
    </>
  )
}

react-native

1 Answers

  1. Best Answer

    I had the same problem and I scrambled it like this:

    Apparently you can't display a Date in JSX so I did the following:

        <TouchableOpacity activeOpacity={0.8} onPress={() => setOpen(true)}>
        <Text>Fecha</Text>
        <Text> {fechaFormato} </Text>
      </TouchableOpacity>
    </View>


    <DatePicker
      modal
      open={open}
      mode="date"
      date={date}
      onConfirm={date => {
        setOpen(false);
        formatFecha(date);
      }}
      onCancel={() => {
        setOpen(false);
      }}
    />

    When I wanted to save the date, I sent it to a method that transforms it into a string so I can display it.

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


 const formatFecha = fecha => {
    setDate(fecha);
    const dia = fecha.getDate();
    const mes = fecha.getMonth() + 1;
    const anio = fecha.getFullYear();
    setFechaFormato(`${dia}/${mes}/${anio}`);
  };
    • 2