Migration from react-calendar-time

The package was renamed to universal-datetime-picker in v2.0.0. Props, CSS class names (ctp-*), and React component exports are unchanged. Update the package name, import paths, and Web Component tag names.

Support tier

This page covers the rename only. After migration, use the framework guides for your stack. React stays native; Vue, Svelte, and Angular stay on Web Components.

Install + deps

npm uninstall react-calendar-time
npm install universal-datetime-picker

React apps need React 18+. React 17 is no longer supported. Vanilla, Web Components, and CDN users can omit React peers.

Setup

Replace the dependency as shown above.
Change every import specifier from react-calendar-time to universal-datetime-picker, including subpaths such as /vanilla, /wc, /vue, /svelte, /angular, and /style.css.
Rename Web Component tags from calendar-time* to datetime-picker*.
In Angular, prefer registerDateTimePickerElements. The old registerCalendarTimeElements name remains as a deprecated alias.

Exact import path

// Before
import DateTime, { DateTimeInput } from "react-calendar-time";
import "react-calendar-time/style.css";

// After
import DateTime, { DateTimeInput } from "universal-datetime-picker";
import "universal-datetime-picker/style.css";

Minimal example

import { useState } from "react";
import DateTime, { DateTimeInput } from "universal-datetime-picker";
import "universal-datetime-picker/style.css";

function App() {
  const [value, setValue] = useState<Date | null>(null);
  return (
    <DateTimeInput asString={false} value={value} onChange={setValue} />
  );
}

Realistic example

Web Component tag renames:

<!-- Before -->
<calendar-time inline mode="date" as-string="false"></calendar-time>
<calendar-time-input></calendar-time-input>
<calendar-time-range inline></calendar-time-range>

<!-- After -->
<datetime-picker inline mode="date" as-string="false"></datetime-picker>
<datetime-picker-input></datetime-picker-input>
<datetime-picker-range inline></datetime-picker-range>

// Before
import { defineCustomElements } from "react-calendar-time/wc";

// After
import { defineCustomElements } from "universal-datetime-picker/wc";

Configuration notes

React component names stay DateTime, DateTimeInput, and DateTimeRange.
Prop names and defaults are the same. Keep using asString, mode, inline, and the rest as before.
CSS variables and ctp-* classes are unchanged, so existing themes keep working.
CDN URLs must point at universal-datetime-picker instead of react-calendar-time. Pin a version.

Events

React: onChange and onOpenChange are unchanged.
Custom elements still dispatch bubbling change and openchange CustomEvents.

Customization links

Pitfalls

Leaving old calendar-time tags in HTML after upgrading registers nothing useful.
Staying on React 17 fails peer checks. Upgrade to 18+ or switch to vanilla / WC / CDN.
Mixed imports from both package names duplicate calendars and styles.

Troubleshooting

If tags or imports still point at the old package, search the repo for react-calendar-time and calendar-time. Broader setup issues are in Troubleshooting.