useDateTimeFormatter()

The useDateTimeFormatter() hook returns a function for formatting dates, which accepts an object parameter with the same properties as the <FormatDate> component.

Unless you need a plain string, we recommend you use the component instead.

The returned function returns a string when called, and accepts an object with the following properties:

• show: either "date" (default), "time", or "datetime"
• date: an ISO formatted date string, or a Date objet
• locale: (optional) override the default Intl.Locale
• options (optional) override the default Intl.DateTimeFormat

Examples

import { useDateTimeFormatter } from "@intility/bifrost-react";

function MyComponent() {
  const dateTimeFormatter = useDateTimeFormatter();

  // pass "date", "time", or "datetime" to the `show` property
  // "04/03/2024"
  dateTimeFormatter({
    show: "date",
    date: "2024-03-04T10:23:11.408Z",
  });
  // "11:23"
  dateTimeFormatter({
    show: "time",
    date: "2024-03-04T10:23:11.408Z",
  });
  // "04/03/2024 11:23"
  dateTimeFormatter({
    show: "datetime",
    date: "2024-03-04T10:23:11.408Z",
  });

  // `date` accepts string or Date
  // `show` defaults to "date"
  // both these will return "04/03/2024"
  dateTimeFormatter({ date: new Date("2024-03-04T10:23:11.408Z") });
  dateTimeFormatter({ date: "2024-03-04T10:23:11.408Z" });
}
import { useDateTimeFormatter } from "@intility/bifrost-react";

function MyComponent() {
  const dateTimeFormatter = useDateTimeFormatter();

  // pass "date", "time", or "datetime" to the `show` property
  // "04/03/2024"
  dateTimeFormatter({
    show: "date",
    date: "2024-03-04T10:23:11.408Z",
  });
  // "11:23"
  dateTimeFormatter({
    show: "time",
    date: "2024-03-04T10:23:11.408Z",
  });
  // "04/03/2024 11:23"
  dateTimeFormatter({
    show: "datetime",
    date: "2024-03-04T10:23:11.408Z",
  });

  // `date` accepts string or Date
  // `show` defaults to "date"
  // both these will return "04/03/2024"
  dateTimeFormatter({ date: new Date("2024-03-04T10:23:11.408Z") });
  dateTimeFormatter({ date: "2024-03-04T10:23:11.408Z" });
}

Locale

Just like <FormatDate>, useDateTimeFormatter() follows current bifrost locale (default english).
Use <Bifrost locale={nbNO}> in your app to use norwegian formatting.

Norwegian

import { Bifrost, nbNO } from "@intility/bifrost-react";

<Bifrost locale={nbNO}>
  <MyComponent />
</Bifrost>;
import { Bifrost, nbNO } from "@intility/bifrost-react";

<Bifrost locale={nbNO}>
  <MyComponent />
</Bifrost>;

Swedish

import { Bifrost, svSE } from "@intility/bifrost-react";

<Bifrost locale={svSE}>
  <MyComponent />
</Bifrost>;
import { Bifrost, svSE } from "@intility/bifrost-react";

<Bifrost locale={svSE}>
  <MyComponent />
</Bifrost>;