DateTimePicker component

Intro

Date-time picker component is a custom formly field type created for @angular-material-components/datetime-picker.

Component is registered in module { FormlyDateTimePickerModule } that can be imported from '@enigmatry/entry-form/date-time-picker'.

How to use

In your Angular project install the @angular-material-components/datetime-picker. Make sure to choose the version corresponding to your Angular version.

npm install --save  @angular-material-components/datetime-picker

To register formly type, add the FormlyDateTimePickerModule to modules whose components will be using the date-time-picker in their templates or shared formly extensions module and provide ```NgxMatDateAdapter`` (see Choosing a date implementation)

import { FormlyDateTimePickerModule } from '@enigmatry/entry-form/date-time-picker';

@NgModule({
  declarations: [
    DemoComponent
  ],
  imports: [
    CommonModule,
    FormlyDateTimePickerModule 
  ],
  providers: [
    {
      provide: NgxMatDateAdapter,
      useClass: NgxMatDateFnsAdapter,
      deps: [MAT_DATE_LOCALE]
    }
  ]
})
export class DemoModule { }

Configure field as date time field in code generator configuration using

builder.DateTimePickerFormControl(x => x.ExpiresOn).

Choosing a date implementation

Date time picker can work with a variety of different date implementations. Use one of the build in date adapters by importing one of the provided modules:

	NgxMatNativeDateModule	NgxMatMomentModule
Date type	Date	Moment
Supported locales	en-US	See project for details
Dependencies	None	Moment.js
Import from	@angular-material-components/datetime-picker	@angular-material-components/moment-adapter

Or create a custom date adapter.

To use a custom date-fns date adapter:

npm install --save @angular/material-date-fns-adapter

import { nl } from 'date-fns/locale';
import { MAT_DATE_LOCALE } from '@angular/material/core';

import { NgxMatDateFnsAdapter } from '@enigmatry/entry-form/date-time-picker/date-fns-adapter';
import { NgxMatDateAdapter } from '@angular-material-components/datetime-picker';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  providers: [
  {
    provide: MAT_DATE_LOCALE,
    useValue: nl
  },
  {
    provide: NgxMatDateAdapter,
    useClass: NgxMatDateFnsAdapter,
    deps: [MAT_DATE_LOCALE]
  }
  ]
})
export class SharedModule { }