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-fns

Format String Changes

Moment.jsdate-fnsDescription
DDddDay of month (zero-padded)
YYYYyyyyFull year
HHHH24-hour (unchanged)
hhh12-hour (single 'h' in date-fns)
AaAM/PM (lowercase in date-fns)