CODEWITHSUNDEEP
reactjsreact-datepicker
Mohamed Aljane
Mohamed Aljane

Reputation: 51

How to use react-datepicker dateFormat correctly

I am creating a form containing 2 (a start and end ) DatePickers and everything is working fine: I can pick the date and then use the value in the state (it's functional). My issue is that, when picking a date, it doesn't show correctly inside the field.

You can only see the first 3 characters.

How can I fix this? I tried getting the value from field props and inserting it in the selected property, but it's not working - it always shows just the first 3 characters.

This is the code I have right now: 

render() {

const placeholder = this.props.name === "start" ? "From" : "To";
   const { showTime, value } = this.props
   console.log(moment(value).format('LLL'))
   return (
     <div className="date-picker">
       <DatePicker
         timeFormat="HH:mm"
         selected={value ? new Date(moment(value).format('LLL')) : this.state.startDate}
         onChange={this.handleChange}
         showTimeSelect={showTime}
         dateFormat="LLL"
         dropDownMode="select"
         placeholderText={placeholder}
       />
     </div>
   );
 }
}

Upvotes: 2

Views: 5492

Answers (1)

Rami Loiferman
Rami Loiferman

Reputation: 912

Just change this:

dateFormat="LLL"

To

dateFormat="MMMM d, yyyy h:mm aa"

You used moment library format in react-datepicker

For more reading about the format of react-datepicker go here

Upvotes: 3

Related Questions