Date and time

The @fab4m/date packages provides date and datetime components using the popular react-datepicker package.

Installing

Install @fab4m/date and react-datepicker (4.2.x)

npm install --save @fab4m/date react-datepicker

Using the date fields

@fab4m/date provides three field types: dateField, dateTimeField and dateRangeField.

The following example shows them in action:

Code

import * as React from "react";
import { dateField, dateTimeField, dateRangeField } from "@fab4m/date";
import { StatefulFormView, createForm } from "@fab4m/fab4m";
import "react-datepicker/dist/react-datepicker.css";

const form = createForm({
  birthday: dateField({
    label: "Your birthday",
  }),
  appointment: dateTimeField({
    label: "Your appointment time",
  }),
  vacation: dateRangeField({
    label: "Enter your desired vacation",
  }),
});

export default function DateExamples() {
  const [result, changeResult] = React.useState(null);
  form.onSubmit((e, data) => {
    e.preventDefault();
    changeResult(data);
  });
  return (
    <div>
      <StatefulFormView form={form} />
      {/* The data that comes out of the form are dates. */}
      {result && (
        <dl>
          <dt>Birthday</dt>
          <dd>{result.birthday?.toLocaleString()}</dd>
          <dt>Appointment</dt>
          <dd>{result.appointment?.toLocaleString()}</dd>
          <dt>Vacation</dt>
          {/* The date range is two dates, from and to.*/}
          <dd>
            {result.vacation?.from.toLocaleString()} -{" "}
            {result.vacation?.to.toLocaleString()}
          </dd>
        </dl>
      )}
    </div>
  );
}

Example

The datepicker widget

The datepicker widget is used by default on all date and datetime fields. It has several settings that let's you customize how it works.

Date format

You can customize the format of the date when it's displayed inside of the input field. The formatting options are provided by the date-fns package.

Code

import * as React from "react";
import { dateField, datePickerWidget } from "@fab4m/date";
import { StatefulFormView, createForm } from "@fab4m/fab4m";
import "react-datepicker/dist/react-datepicker.css";

const form = createForm({
  birthday: dateField({
    label: "Your birthday",
    widget: datePickerWidget({
      format: "yyyy-MM-dd",
    }),
  }),
});

export default function CustomFormat() {
  return (
    <div>
      <StatefulFormView form={form} hideSubmit={true} />
    </div>
  );
}

Example

Fixed locale

You can set a fixed locale for your datepicker field by providing a date-fns locale. This will make the datepicker format the dates according to the specified locale, no matter what locale the browser has:

Code

import * as React from "react";
import { dateField, datePickerWidget } from "@fab4m/date";
import { sv } from "date-fns/locale";
import { StatefulFormView, createForm } from "@fab4m/fab4m";
import "react-datepicker/dist/react-datepicker.css";

const form = createForm({
  birthday: dateField({
    label: "Your birthday",
    widget: datePickerWidget({
      locale: sv,
    }),
  }),
});

export default function SingleLocale() {
  return (
    <div>
      <StatefulFormView form={form} hideSubmit={true} />
    </div>
  );
}

Example

Using the browser locale

If you want to support multiple locales you can provide a list of all supported locales as a setting. The datepicker widget will try to find out the browser locale and use the locale if it's provided in the list.

The first locale in the list will be used as a default.

Code

import * as React from "react";
import { dateField, datePickerWidget } from "@fab4m/date";
import { sv, de, fi } from "date-fns/locale";
import { StatefulFormView, createForm } from "@fab4m/fab4m";
import "react-datepicker/dist/react-datepicker.css";

const form = createForm({
  birthday: dateField({
    label: "Your birthday",
    widget: datePickerWidget({
      locales: [sv, de, fi],
      useBrowserLocale: true,
    }),
  }),
});

export default function BrowserLocale() {
  return (
    <div>
      <StatefulFormView form={form} hideSubmit={true} />
    </div>
  );
}

Example

Customizing React datepicker properties

react-datepicker supports many options and you might want to customize them according to your needs. You can do this by passing in the properties you want in the datePicker widget settings:

Code

import * as React from "react";
import { dateField, datePickerWidget } from "@fab4m/date";
import { StatefulFormView, createForm } from "@fab4m/fab4m";
import "react-datepicker/dist/react-datepicker.css";

const form = createForm({
  inline: dateField({
    label: "Inline datepicker",
    widget: datePickerWidget({
      datePickerProps: { inline: true },
    }),
  }),
  as_function: dateField({
    label: "Start from 1990, if not selected",
    widget: datePickerWidget({
      // The props can also be a function where the current value is passed in.
      datePickerProps: (value) => ({
        openToDate: !value ? new Date("1990-01-01") : undefined,
      }),
    }),
  }),
});

export default function CustomDatePickerProps() {
  return (
    <div>
      <StatefulFormView form={form} hideSubmit={true} />
    </div>
  );
}

Example

caution

Properties passed to react datepicker aren't serialized with your form, since we can't possibly support serializing all of the possible configurations!

The date range widget

The date range widget is used with the date range field. It supports all settings from the date picker widget above and the following additional settings:

• fromLabel: The text that is displayed inside of the from input field.
• toLabel: The text that is is displayed inside of the to input field.
• optionalEndDate: This makes the end date optional.
• withTime: If this is true, then you get the option to specify the time in the date range, not just the dates.

Unserializing date widget settings

The locale and locales settings are stored just as a language code when a date widget is serialized. In order to unserialize the widget properly, you need to provide the available locales, so that the language codes can be converted to locale objects.

This is done by calling the setLocales() function before unserializing:

import { enUS, sv } from "date-fns/locale";
import { setLocales } from "@fab4m/date"
setLocales([enUS, sv]);

Now it's safe to go on and unserialize your forms.