Bridge UI

Dates

Plug a date library into Bridge UI with the date adapter.

Bridge UI calendars and pickers format, parse, and navigate dates through a pluggable DateAdapter on BridgeUIProvider (global.dates). Without one, Bridge uses the built-in native Date adapter.

Bridge only defines the DateAdapter interface — implement it yourself, or copy a sample adapter for Day.js, date-fns, Luxon, or Moment.

Import

import type { DateAdapter } from "@bridge-ui/core/Adapters";
import { createNativeDateAdapter } from "@bridge-ui/core/Adapters";
import { useDateAdapter } from "@bridge-ui/vue";
import type { DateAdapter } from "@bridge-ui/core/Adapters";
import { createNativeDateAdapter } from "@bridge-ui/core/Adapters";
import { useDateAdapter } from "@bridge-ui/react";

Examples

Pass a DateAdapter to global.dates. On Vue you can also use createBridgeUI(); in Astro, wire it once via appEntrypoint.

Copy-paste adapters live in the core repo under packages/{react,vue}/docs/examples/ (not published on npm). Each exports a create*DateAdapter() factory that returns a plain DateAdapter.

import { BridgeUIProvider } from "@bridge-ui/react";
import { createDayjsDateAdapter } from "./date-dayjs";

const dates = createDayjsDateAdapter();
<BridgeUIProvider global={{ dates }}>
  <App />
</BridgeUIProvider>

The native fallback is always available when you omit global.dates:

import { createNativeDateAdapter } from "@bridge-ui/core/Adapters";

const dates = createNativeDateAdapter();
File Library
date-dayjs.ts Day.js
date-date-fns.ts date-fns
date-luxon.ts Luxon
date-moment.ts Moment
File Library
date-dayjs.ts Day.js
date-date-fns.ts date-fns
date-luxon.ts Luxon
date-moment.ts Moment

Adapters receive locale from global.locale and optional IANA timeZone from field props. Time formatting also honors ampm and showSeconds via DateAdapterTimeOptions.

API

Export / option Type Description
DateAdapter interface Format, parse, and calendar math used by date / time components.
createNativeDateAdapter () => DateAdapter<Date> Built-in adapter backed by the native Date object.
useDateAdapter () => DateAdapter Returns the active adapter from the provider (or the native default).
global.dates DateAdapter Provider option that replaces the native adapter app-wide.
Tip

Sample adapters keep TDate = Date so field values stay interchangeable with native Date. Install the chosen library (Day.js, date-fns, Luxon, or Moment) in your app before copying a sample.

Next steps