@fundamental-ngx/datetime-adapter

Description

Date/time adapter based on Day.js for Fundamental NGX date and time components (Date Picker, Time Picker, DateTime Picker, etc.).

Fundamental NGX date components rely on the DatetimeAdapter abstraction from @fundamental-ngx/core/datetime. By default they use the built-in FdDatetimeAdapter (native Date). This package provides DayjsDatetimeAdapter as an alternative, which adds reliable locale-aware parsing and formatting via Day.js.

Installation

npm install @fundamental-ngx/datetime-adapter dayjs

Usage

Import DayjsDatetimeAdapterModule in the module or standalone component that hosts your date/time components:

// app.config.ts
import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { DayjsDatetimeAdapterModule } from '@fundamental-ngx/datetime-adapter';

export const appConfig: ApplicationConfig = {
    providers: [importProvidersFrom(DayjsDatetimeAdapterModule)]
};

Or import it directly in a standalone component:

import { Component } from '@angular/core';
import { DatePickerComponent } from '@fundamental-ngx/core/date-picker';
import { DayjsDatetimeAdapterModule } from '@fundamental-ngx/datetime-adapter';
import type { Dayjs } from 'dayjs';

@Component({
    selector: 'app-date-example',
    imports: [DatePickerComponent, DayjsDatetimeAdapterModule],
    template: `<fd-date-picker [(ngModel)]="date" />`
})
export class DateExampleComponent {
    date: Dayjs | null = null;
}

Locale support

Day.js locale plugins are loaded separately. Import the locale before bootstrapping:

import 'dayjs/locale/de';
import dayjs from 'dayjs';

dayjs.locale('de');

Strict parsing and UTC mode

Configure the adapter via DAYJS_DATE_TIME_ADAPTER_OPTIONS:

import { DAYJS_DATE_TIME_ADAPTER_OPTIONS } from '@fundamental-ngx/datetime-adapter';

providers: [{ provide: DAYJS_DATE_TIME_ADAPTER_OPTIONS, useValue: { strict: true, useUtc: false } }];

See the documentation for full configuration and format customization options.