Migration
Version 3.0.0 replaced Moment.js with date-fns. The API surface is largely the same — the main difference is that all date values are now plain JavaScript Date objects instead of Moment objects.
Alignment Prop (replaces leftMode / centerMode)
The leftMode and centerMode boolean props have been removed and replaced with a single alignment prop that accepts 'left', 'center', or 'right'.
// leftMode / centerMode → alignment
//
// Before:
<ReactDateTimePicker leftMode /> // opens right-aligned
<ReactDateTimePicker centerMode /> // opens centered
<ReactDateTimePicker /> // opens left-aligned (default)
// After:
<ReactDateTimePicker alignment="right" /> // opens right-aligned
<ReactDateTimePicker alignment="center" />// opens centered
<ReactDateTimePicker /> // opens left-aligned (default)v2 → v3: Moment.js to date-fns
// v2 (Moment.js) → v3 (date-fns)
//
// 1. Date objects: Moment objects → plain JavaScript Date objects
// Before: moment()
// After: new Date()
//
// 2. Range definitions: Use date-fns helpers
// Before: { Today: [moment().startOf('day'), moment().endOf('day')] }
// After: { Today: [startOfDay(new Date()), endOfDay(new Date())] }
//
// 3. Date format strings: Moment format → date-fns format
// Before: 'DD-MM-YYYY HH:mm'
// After: 'dd-MM-yyyy HH:mm'
//
// 4. Callback signatures: Same shape, but Date instead of Moment
// Before: applyCallback(momentStart, momentEnd)
// After: applyCallback(dateStart, dateEnd)
//
// 5. Remove moment dependency
// npm uninstall moment
// npm install date-fnsFormat String Changes
| Moment.js | date-fns | Description |
|---|---|---|
| DD | dd | Day of month (zero-padded) |
| YYYY | yyyy | Full year |
| HH | HH | 24-hour (unchanged) |
| hh | h | 12-hour (single 'h' in date-fns) |
| A | a | AM/PM (lowercase in date-fns) |