aaronmccall / date-io

Abstraction over common javascript date management libraries

date-io

Abstraction over common javascript date management libraries.

The project expose abstraction interface over luxon, date-fns v2 and moment. Which can be easily used by any ui date or time components to use the same date managment lib as user's project use.

That simplifies timezones management, makes your code return exactly the same type that user expect and work with specific calendar systems (e.g. Jalali calendar)

Projects

Library	Downloads
@date-io/moment
@date-io/date-fns
@date-io/luxon

Projects, which are already built over date-io:

• material-ui-pickers

Usage example

import LuxonUtils from "@date-io/luxon";
import DateFnsUtils from "@date-io/date-fns";

const dateFns = new DateFnsUtils();
const luxon = new LuxonUtils({ locale: "fr" }); // pass french locale

const initialLuxonDate = luxon.date("2018-10-28T11:44:00.000Z");
const initialDateFnsDate = dateFns.date("2018-10-28T11:44:00.000Z");

const updatedLuxonDate = luxon.addDays(initialLuxonDate, 2);
const updatedDateFnsDate = dateFns.addDays(initialDateFnsDate, 2);

luxon.format(updatedLuxonDate, utils.dateTime24hFormat); // "octobre 30 11:44"
dateFns.format(updatedLuxonDate, utils.dateTime24hFormat); // "October 30th 11:44"

Interface

Implemented interface for now. If you can not find needed method please let us know and we will add it!

export interface IUtils<TDate> {
  locale?: any;
  moment?: any;

  yearFormat: string;
  yearMonthFormat: string;

  dateTime12hFormat: string;
  dateTime24hFormat: string;

  time12hFormat: string;
  time24hFormat: string;

  dateFormat: string;
  // constructor (options?: { locale?: any, moment?: any });

  date(value?: any): TDate | null;
  parse(value: string, format: string): TDate | null;

  isNull(value: TDate | null): boolean;
  isValid(value: any): boolean;
  getDiff(value: TDate, comparing: TDate | string): number;
  isEqual(value: any, comparing: any): boolean;
  isSameDay(value: TDate, comparing: TDate): boolean;

  isAfter(value: TDate, comparing: TDate): boolean;
  isAfterDay(value: TDate, comparing: TDate): boolean;
  isAfterYear(value: TDate, comparing: TDate): boolean;

  isBeforeDay(value: TDate, comparing: TDate): boolean;
  isBeforeYear(value: TDate, comparing: TDate): boolean;
  isBefore(value: TDate, comparing: TDate): boolean;

  startOfMonth(value: TDate): TDate;
  endOfMonth(value: TDate): TDate;

  addDays(value: TDate, count: number): TDate;

  startOfDay(value: TDate): TDate;
  endOfDay(value: TDate): TDate;

  format(value: TDate, formatString: string): string;
  formatNumber(numberToFormat: string): string;

  getHours(value: TDate): number;
  setHours(value: TDate, count: number): TDate;

  getMinutes(value: TDate): number;
  setMinutes(value: TDate, count: number): TDate;

  getSeconds(value: TDate): number;
  setSeconds(value: TDate, count: number): TDate;

  getMonth(value: TDate): number;
  setMonth(value: TDate, count: number): TDate;
  getNextMonth(value: TDate): TDate;
  getPreviousMonth(value: TDate): TDate;

  getMonthArray(value: TDate): TDate[];

  getYear(value: TDate): number;
  setYear(value: TDate, count: number): TDate;

  mergeDateAndTime(date: TDate, time: TDate): TDate;

  getWeekdays(): string[];
  getWeekArray(date: TDate): TDate[][];
  getYearRange(start: TDate, end: TDate): TDate[];

  // displaying methods
  getMeridiemText(ampm: "am" | "pm"): string;
  getCalendarHeaderText(date: TDate): string;
  getDatePickerHeaderText(date: TDate): string;
  getDateTimePickerHeaderText(date: TDate): string;
  getMonthText(date: TDate): string;
  getDayText(date: TDate): string;
  getHourText(date: TDate, ampm: boolean): string;
  getMinuteText(date: TDate): string;
  getSecondText(date: TDate): string;
  getYearText(date: TDate): string;
}

Typescript

The project itself written in typescript, so we are providing our own typescript defenitions. But for the moment users its required to add esModuleIntertop and allowSyntheticDefaultImports to your tsconfig.json

{
  "compilerOptions": {
    "esModuleIntertop": true,
    "allowSyntheticDefaultImports": true
  }
}