Date Frameworks

use-date-input provides an adapter API that enables it to work with any date framework.

The adapter interface is provided to use-date-input components through the adapter prop.

Adapters have been created for all the popular Date frameworks. To keep the bundle size low and to let the user manage versioning, the provided adapters require peer dependencies to specify the date API.

• date-fns
• dayjs
• luxon
• moment
• ... or write your own

With date-fns

Install the dependencies with

yarn add @date-fns
yarn add @use-date-input/date-fns-adapter

OR

npm install -s @date-fns
npm install -s @use-date-input/date-fns-adapter

Import the adapter into your component

import { adapter as dateFnsAdapter } from "@use-date-input/date-fns-adapter";

Use the adapter prop with the use-date-input components.

() => {
  // import { Calendar } from "@use-date-input/core";
  // import { adapter as dateFnsAdapter } from "@use-date-input/date-fns-adapter";
  return (
    <Calendar
      adapter={dateFnsAdapter}
      numOfColumns={2}
      numOfVisibleMonths={2}
    />
  )
}

With dayjs

Install the dependencies with

yarn add @dayjs
yarn add @use-date-input/dayjs-adapter

OR

npm install -s @dayjs
npm install -s @use-date-input/dayjs-adapter

Import the adapter into your component

import { adapter as dayjsAdapter } from "@use-date-input/dayjs-adapter";

Use the adapter prop with the use-date-input components.

() => {
  // import { Calendar } from "@use-date-input/core";
  // import dayjsAdapter from "@use-date-input/dayjs-adapter";
  return (
    <Calendar
      adapter={dayjsAdapter}
      numOfColumns={2}
      numOfVisibleMonths={2}
    />
  )
}

With luxon

Install the dependencies with

yarn add @luxon
yarn add @use-date-input/luxon-adapter

OR

npm install -s @luxon
npm install -s @use-date-input/luxon-adapter

Import the adapter into your component

import { adapter as luxonAdapter } from "@use-date-input/dayjs-adapter";

Use the adapter prop with the use-date-input components.

() => {
  // import { Calendar } from "@use-date-input/core";
  // import luxonAdapter from "@use-date-input/luxon-adapter";
  return (
    <Calendar
      adapter={luxonAdapter}
      numOfColumns={2}
      numOfVisibleMonths={2}
    />
  )
}

With moment

Install the dependencies with

yarn add @moment
yarn add @use-date-input/moment-adapter

OR

npm install -s @moment
npm install -s @use-date-input/moment-adapter

Import the adapter into your component

import { adapter as momentAdapter } from "@use-date-input/moment-adapter";

Use the adapter prop with the use-date-input components.

() => {
  // import { Calendar } from "@use-date-input/core";
  // import { adapter as momentAdapter } from "@use-date-input/moment-adapter";
  return (
    <Calendar
      adapter={momentAdapter}
      numOfColumns={2}
      numOfVisibleMonths={2}
    />
  )
}

Week Offset

Date frameworks use different week offsets, so you can customize on use-date-input components through the use of the weekOffset prop

() => {
  // import { Calendar } from "@use-date-input/core";
  // import { adapter as luxonAdapter } from "@use-date-input/luxon-adapter";
  return (
    <Calendar
      adapter={luxonAdapter}
      numOfColumns={2}
      numOfVisibleMonths={2}
      weekOffset={6}
    />
  )
}

Write Your Own Adapter

To write your own adapter or customize the existing adapters, you need to build this interface and provide it through the adapter prop.

const adapter = ({ weekOffset = 0 } = {}) => ({
  addDays,
  addMonths,
  addWeeks,
  addYears,
  createDate,
  daysInMonth,
  dayOfWeek,
  diffInDays,
  diffInMonths,
  endOfMonth,
  endOfWeek,
  endOfYear,
  format,
  getDateFormat,
  isAfter,
  isBefore,
  isSameDay,
  isSameMonth,
  isValid:
  set,
  startOfMonth,
  startOfWeek,
  startOfYear,
  subtractDays,
  subtractMonths,
  subtractWeeks,
  subtractYears
});

For the most cases, this just requires mapping these callbacks to the equivalent date framework call.

For further examples, refer to the provided adapters code, such as @use-date-input/dayjs-adapter.