CODEWITHSUNDEEP
javascriptreactjsreact-datepicker
Xenia
Xenia

Reputation: 85

React Datepicker. How to save time in state?

Currently, I'm creating a mini-project in order to learn React. I'm using React Datepicker for my booking page. It's easy to save a chosen date in state:

state = {
            startDate: new Date(),
            time: null 
} 
handleChange = (date) => {
    this.setState( {startDate: date} )         
}
<DatePicker
        selected={this.state.startDate}
        locale="ru"
        onChange={this.handleChange}
        minTime={setHours(setMinutes(new Date(), 0), 9)}
        maxTime={setHours(setMinutes(new Date(), 0), 22)}
        showTimeSelect
        timeIntervals={60}
        inline
/>

But I don't understand how to save time in the state as well. If a user doesn't choose the time, the current time will be saved but it's not what I want. I need to have "time" as a requirement and save it correctly in the state.

I would appreciate any help!

Upvotes: 4

Views: 1623

Answers (2)

Xenia
Xenia

Reputation: 85

Well, in the end I had to add my own time component and use it.

Upvotes: 0

Arpit Vyas
Arpit Vyas

Reputation: 2227

set your state as below 

  state={
        startDate:new Date()
        }

        return (
        <DatePicker
      selected={startDate}
      onChange={date => setStartDate(date)}
      timeInputLabel="Time:"
      dateFormat="MM/dd/yyyy h:mm aa"
      showTimeInput
    />
      );

Upvotes: 1

Related Questions