How to show the only date in react-datetime-picker

Question

I am using the react-datetime-picker npm module for selecting date.I need to display the date only without time

 import DatePicker from 'react-datetime-picker'; onChange(date){ this.setState({ profileSetting:{dob:date} }); } <DatePicker className="form-control" disableClock={true} locale="en-US" onChange={this.onChange} value={this.state.profileSetting.dob} />

present date displayed like "10/20/2018 12:00 AM" but i need to display date like "10/20/2018".Please help me out of this issue

Answer 1

In on onChange method, you can simply format your date as per your requirement

const selectedDate = new Date('10/20/2018 12:00 AM'); // pass in date param here
const formattedDate = `${selectedDate.getMonth()+1}/${selectedDate.getDate()}/${selectedDate.getFullYear()}`;
console.log(formattedDate);

Answer 2

You can use that code in which you can define format and mode. first format show only date in 'YYYY-MM-DD' format and second one in 'YYYY-MM-DD hh:mm:ss' format. Package used :- import DatePicker from 'react-native-datepicker'

                   <DatePicker 
                    style={{ width: 200 }}
                    date={this.state.date}
                    placeholder="select date"
                    format="YYYY-MM-DD" 
                    //format='YYYY-MM-DD hh:mm:ss'
                    minDate="2016-06-01"
                    maxDate="2020-06-01"
                    confirmBtnText="Confirm"
                    cancelBtnText="Cancel"
                    mode='datetime'
                    customStyles={{
                        dateIcon: {
                            position: 'absolute',
                            left: 0,
                            top: 4,
                            marginLeft: 0
                        },
                        dateInput: {
                            marginLeft: 36
                        }
                    }}
                    onDateChange={(date) => {
                        this.setState({ date: date })
                    }}
                />

Answer 3

Kindly use bootstrap input and put type = "text"

**<input type="date" />**

If you use this u don't need another library and use instead react hook forms which will handle controlled components in your forms