React-datepicker: [Help Wanted] Format date based on given locale

[ericreis]

I was wondering if there is a way to format date and time based on the locale prop. For example:

| locale | dateFormat | timeFormat |
|:-------:|:-------------:|------------|
| en-US | MM/dd/yyyy | hh:mm aa |
| pt-BR | dd/MM/yyyy | HH:mm |

Expected behavior

Automatically uses the corresponding date and time formats when passing a locale prop.

Actual behavior

Even using the locale prop I need to pass the corresponding date and time formats

Steps to reproduce

const DatePicker = require('./index.js').default

class DatePickerExample extends React.Component {
  constructor() {
    super()
    this.state = {
      startDate: new Date(),
      locale: 'pt-BR',
    }

    this.handleDateChange = this.handleDateChange.bind(this)
  }

  handleDateChange(date) {
    this.setState({
      startDate: date,
    })
  }

  render() {
    return (
      <DatePicker
        value={this.state.startDate}
        onChange={this.handleDateChange}
        useTime={true}
        locale={this.state.locale}
      />
    )
  }
}

;<DatePickerExample />

I expected to see the date formated as dd/MM/yyyy HH:mm but it remained the default MM/dd/yyyy hh:mm aa

[klzns]

You can do:

  <DatePicker
   selected={this.state.startDate}
   onChange={this.handleDateChange}
+  dateFormat="P"
   locale={this.state.locale} />

[ericreis]

Thank you @klzns ! It's exactly what I was looking for.

[bill-filler]

@klzns
I have a related question. Is there a way to do the same thing for placeholderText attribute such that placeholder displays a hint for the localized date format?