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). When global.dates is omitted, each provider creates its own native Date adapter.

Bridge defines the DateAdapter interface. Ready factories for Day.js, date-fns, Luxon, and Moment ship in the separate @bridge-ui/adapters package. Implement your own adapter when you need a different library.

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.

Install @bridge-ui/adapters, import a factory from its subpath, and install the matching date library. The table below is that list. Factories are separate entry points, so each one only pulls in its own library.

Bridge locales stay en-US and pt-BR. Native, Luxon, and date-fns already use those tags. Day.js and Moment want ids such as en and pt-br — pass that map to the factory and import the matching locale files.

Day.js IANA zones need utc and timezone extended in the app. The adapter loads customParseFormat itself. Moment IANA zones need moment-timezone imported in the app. date-fns keeps the local calendar. Use the native adapter, Luxon, or Day.js when a picker needs an IANA zone.

import dayjs from "dayjs";
import "dayjs/locale/pt-br";
import timezone from "dayjs/plugin/timezone";
import utc from "dayjs/plugin/utc";
import { createApp } from "vue";
import { createBridgeUI } from "@bridge-ui/vue";
import { createDayjsDateAdapter } from "@bridge-ui/adapters/vue/date-dayjs";
import App from "./App.vue";

dayjs.extend(utc);
dayjs.extend(timezone);

const dates = createDayjsDateAdapter({
  "en-US": "en",
  "pt-BR": "pt-br",
});

createApp(App).use(
  createBridgeUI({
    global: { dates },
  }),
);

import dayjs from "dayjs";
import "dayjs/locale/pt-br";
import timezone from "dayjs/plugin/timezone";
import utc from "dayjs/plugin/utc";
import { BridgeUIProvider } from "@bridge-ui/react";
import { createDayjsDateAdapter } from "@bridge-ui/adapters/react/date-dayjs";

dayjs.extend(utc);
dayjs.extend(timezone);

const dates = createDayjsDateAdapter({
  "en-US": "en",
  "pt-BR": "pt-br",
});

<BridgeUIProvider global={{ dates }}>
  <App />
</BridgeUIProvider>

import "moment-timezone";
import { createMomentDateAdapter } from "@bridge-ui/adapters/vue/date-moment";

const dates = createMomentDateAdapter({
  "en-US": "en",
  "pt-BR": "pt-br",
});

import "moment-timezone";
import { createMomentDateAdapter } from "@bridge-ui/adapters/react/date-moment";

const dates = createMomentDateAdapter({
  "en-US": "en",
  "pt-BR": "pt-br",
});

The native adapter is what each provider creates when you omit global.dates. Call createNativeDateAdapter() when you want that adapter explicitly:

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

const dates = createNativeDateAdapter();

setLocale updates global.locale and calls optional dates.setLocale. setTimeZone updates global.timeZone and calls optional dates.setTimeZone. A component timeZone still overrides that default on adapter methods. The bound Date stays a UTC instant; the zone only changes the wall clock shown in the UI.

import { useBridgeUI } from "@bridge-ui/vue";

const { setLocale, setTimeZone } = useBridgeUI()!;

setLocale("pt-BR");
setTimeZone("America/Sao_Paulo");

import { useBridgeUI } from "@bridge-ui/react";

const { setLocale, setTimeZone } = useBridgeUI()!;

setLocale("pt-BR");
setTimeZone("America/Sao_Paulo");

Time formatting also honors ampm and showSeconds via DateAdapterTimeOptions. format accepts DateAdapterFormatOptions so month and year granularity can omit the day.

API

Next steps

• DateField — date picker field API
• TimeField — time picker field API
• Icons — semantic icon adapter
• Default props — other global provider options