CODEWITHSUNDEEP
react-nativedatetimepicker
user14877357
user14877357

Reputation:

How to show only date in DateTimePicker in react native

I am new to react native. I have created a screen where I am showing date . and I am using DateTimePicker in react native. But the problem is I only want to show date like this => "fri jun 12 2020" or 6 jun 2020 or 6/6/2020 or 6-6-2020. but I am getting date like this.=> Fri Jun 12 2020 05:30:00 GMT+0530(IST). so please help. thanks. In short I dont want display Time

here is my code

<DateTimePicker 
   value={date}           
   mode={mode}
   is24Hour={false}
   display="default" 
   onChange={this.setDate} 
/>

<Text style={{fontSize: 18}}>{String(this.state.dateString)}</Text>

here is my code of onChange . I am getting undefined instead of date = >

setDate = (event,  selectedDate) => {

    const year = selectedDate.getFullYear();
    const  month = selectedDate.getMonth(); 
    const  day= selectedDate.getDate();
  
    const  dateString = `${day}-${month}-${year}`;
    this.setState({date: selectedDate})
    this.setState({dateString: dateString})

 }

Upvotes: 2

Views: 2717

Answers (1)

Yoel
Yoel

Reputation: 7985

add state stringDate

const onChange = (event, selectedDate) => {      
  const year = selectedDate.getFullYear();
  const  month = selectedDate.getMonth()+1; 
  const  day= selectedDate.getDate();

  const  dateString = `${day}-${month}-${year}`;
  setDate(date );
  setDateString(dateString) 
};

then display dateString

   <Text style={{fontSize: 18}}>{String(this.state.dateString)}</Text>

Upvotes: 1

Related Questions