@eqproject/eqp-datetimepicker-next v0.1.3

Table of contents

• Getting started
• API
• Use cases
• Credits

Required

• Angular Material installed and imported
• @angular-material-components/datetime-picker (v2.0.4)
• @angular-material-components/moment-adapter
• Moment.js

Getting started

This package is based on angular material and momentjs and allows to create 3 kind of date/time picker: date only, time only and both. The calendar adapts its display according to the locale registered in the AppModule. The time only picker in configured to handle string/Date/number in input (examples: "23:59" or "23:59:59", javascript Date object, 1631807434670, ...) and returns the same type.

Notes

By default returns the seletected date converted in UTC time zone. If not specified any locale in AppModule by default uses the en-US one.

Step 1: Install eqp-datetimepicker:

NPM

npm install --save @eqproject/eqp-datetimepicker

If needed dependecies are not installed run this commands:

npm i @angular-material-components/datetime-picker@2.0.4
npm install --save  @angular-material-components/moment-adapter
npm install moment --save

Step 2:

Import EqpDatetimepickerModule, NgxMatDatetimePickerModule and NgxMatTimepickerModule :

import { EqpDatetimepickerModule } from '@eqproject/eqp-datetimepicker';
import { NgxMatDatetimePickerModule, NgxMatTimepickerModule } from '@angular-material-components/datetime-picker';

@NgModule({
  declarations: [AppComponent],
  imports: [
    EqpDatetimepickerModule,
    NgxMatDatetimePickerModule, 
    NgxMatTimepickerModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Register any needed locale:

import { LOCALE_ID } from '@angular/core';
import { MAT_DATE_LOCALE } from '@angular/material/core';
import { registerLocaleData } from '@angular/common';
import localeIt from '@angular/common/locales/it';
registerLocaleData(localeIt, 'it-IT');

@NgModule({
  declarations: [...],
  imports: [...],
  providers: [
    { provide: MAT_DATE_LOCALE, useValue: 'it-IT' },
    { provide: LOCALE_ID, useValue: 'it-IT' }
  ],
  bootstrap: [...]
})
export class AppModule {}

API

Inputs

The following Inputs are defined by the ngx-mat-datetime-picker directive inside the @angular-material-components/datetime-picker package. Click this link for the official documentation.

Notes

The [hideTime] input is missing because is set based on the selected view mode.

Outputs

Model, Interfaces and Enums used

Enums description

Use cases

Use Example in class :

Notes

The following examples do not include the use of a form. To do so you need to create a form in the .ts file and use the above inputs to pass it to the directive.

CASE 1: Date and time mode

    <eqp-datetimepicker [placeholder]="placeholder" [(ngModelInput)]="selectedDateTime" [UTCDate]="true" [isRequired]="true"
        [pickerMode]="pickerModeEnum.DATETIME" [disabled]="false" (ngModelInputChange)="onDateChange($event)">
    </eqp-datetimepicker>

    import { PickerModeEnum } from '@eqproject/eqp-datetimepicker';

    selectedDateTime: Date; // or you can set it to any value (for example = new Date();)
    placeholder: string = "Select a date";
    pickerModeEnum = PickerModeEnum;
  
    onDateChange(event) {
        // TODO
    }

CASE 2: Date only picker

    <eqp-datetimepicker [placeholder]="placeholder" [(ngModelInput)]="selectedDate" [UTCDate]="true" [isRequired]="true"
        [pickerMode]="pickerModeEnum.DATE" [disabled]="false" (ngModelInputChange)="onDateChange($event)">
    </eqp-datetimepicker>

    import { PickerModeEnum } from '@eqproject/eqp-datetimepicker';

    selectedDate: Date; // or you can set it to any value (for example = new Date();)
    placeholder: string = "Select a date";
    pickerModeEnum = PickerModeEnum;
  
    onDateChange(event) {
        // TODO
    }

CASE 3: Time only picker

    <eqp-datetimepicker [placeholder]="placeholder" [(ngModelInput)]="selectedTime" [timeType]="timeTypeEnum.STRING" [UTCDate]="true"
        [pickerMode]="pickerModeEnum.TIME" [isRequired]="true" (ngModelInputChange)="onDateChange($event)">
    </eqp-datetimepicker>

    import { PickerModeEnum, TimeTypeEnum } from '@eqproject/eqp-datetimepicker';

    // You can choose from 3 different input types, try them:
    selectedTime: string = "23:59";
    // selectedTime: number = 1631807434670;
    // selectedTime: Date; // or you can set it to any value (for example = new Date();)
    placeholder: string = "Select a date";
    pickerModeEnum = PickerModeEnum;
    timeTypeEnum = TimeTypeEnum;
  
    onDateChange(event) {
        // TODO
    }

Credits

This library has been developed by EqProject SRL, for more info contact: info@eqproject.it