2

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.

  • it's expected to look like this : December 6, 2019 4:00 PM

  • but in reality it looks like this : Dec

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>
   );
 }
}
SherylHohman
  • 16,580
  • 17
  • 88
  • 94
Mohamed Aljane
  • 51
  • 1
  • 9
  • Give an example values for `showTime` and `value` variables – Rami Loiferman Dec 30 '19 at 15:46
  • @RamiLoiferman showTime is a true or false value wich is used to enable picking the time too and this is a value example "Wed Dec 11 2019 00:00:00 GMT+0100 (Central European Standard Time)" – Mohamed Aljane Dec 30 '19 at 15:52

1 Answers1

2

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

Rami Loiferman
  • 853
  • 1
  • 6
  • 22