React-day-picker: Question: how to format as MM/DD/YYYY without moment.js?

[trevordmiller]

Using format='DD/MM/YYYY without moment doesn't seem to work:

<DayPickerInput
  placeholder='DD/MM/YYYY'
  format='DD/MM/YYYY'
...

The placeholder shows DD/MM/YYYY, but when you select a day it changes to YYYY-D-MM. The default codesandbox already reproduces this:
https://codesandbox.io/s/XDAE3x0W8

I am using Luxon instead of moment. Is there a way to change the formatting to DD/MM/YYYY with luxon or plain JS? I can't find anything in the docs.

Thank you for your time and for a great library! Everything else other than the formatting has been great so far :)

[gpbl]

Hola!

You must pass your own parseDate and formatDate to make it working with Luxon. See "Changing the date format" here: http://react-day-picker.js.org/docs/input and the relative docs in the API 👍

[trevordmiller]

@gpbl Thanks, I saw that but it seems specific to moment (importing from 'react-day-picker/moment'). I've tried the following with Luxon but it still shows the YYYY-M-D default formatting:

import { DateTime } from 'luxon'

const DateInput = ({ value, onChange }) =>
      <DayPickerInput
        placeholder='DD/MM/YYYY'
        parseDate={?}
        formatDate={?}
        format="MM'/'dd'/'y"
        value={value.toJSDate()}
        onDayChange={changedDate => onChange(DateTime.fromJSDate(changedDate))}
      />

Is there something I'm missing here? I'm shooting for MM/DD/YYYY format in either Luxon or vanilla JS.

[gpbl]

That moment.js example is for using moment.js, if you want to use another library you need to pass your custom formatDate and parseDate. I don’t know how to explain it in another way 😊

formatDate(date, format) {
   // do luxon things
   return “luxon formatted date”;
}

parseDate(str, format) {
    // do luxon things
   return “str parsed with luxon”;
}

<DayPicker 
  formatDate={formatDate} 
  parseDate={parseDate}
/>

http://react-day-picker.js.org/api/DayPickerInput#formatDate
http://react-day-picker.js.org/api/DayPickerInput#parseDate

[trevordmiller]

For anyone else who stumbles on this, here is an implementation for Luxon:

import { DateTime } from 'luxon'

const formatDate = (dateObject, luxonFormat) =>
  DateTime.fromJSDate(dateObject)
    .toFormat(luxonFormat)

const parseDate = (dateString) =>
  DateTime
    .fromFormat(dateString, "y'-'M'-'d")
    .toJSDate()

Figured it out from the moment.js implementation source code in the library: https://github.com/gpbl/react-day-picker/blob/master/src/addons/MomentLocaleUtils.js#L49-L61. The key was that you have to convert to and from javascript date objects, not strings.