@eqproject/eqp-datetimepicker

Table of contents

• Getting started
• API
• Use cases
• Credits

Required

• [x] Angular Material installed and imported
• [x] @angular-material-components/datetime-picker (v2.0.4)
• [x] @angular-material-components/moment-adapter
• [x] 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

Input	Type	Default	Required	Description
[ngModelInput]	`Date	string	number`	null
[pickerMode]	PickerModeEnum	PickerModeEnum.DATETIME	no	Defines the view mode of the picker.
[timeType]	TimeTypeEnum	TimeTypeEnum.STRING	no	Has effect only if pickerMode == PickerModeEnum.TIME.Sets the type in which time is managed.
[UTCDate]	boolean	true	no	If TRUE the returned date is in UTC time zone.
[placeholder]	string	"Seleziona una data"	no	Sets the placeholder displayed in the input field.
[formGroupInput]	FormGroup	null	no	FormGroup in which the eqp-datetimepicker is used. If not null then formControlNameInput is required.
[formControlNameInput]	string	null	no	Has effect only if formGroupInput is not null. FormControlName of the control used in the defined formGroupInput.
[isRequired]	boolean	false	no	Marks the input as required.
[minDate]	Date	null	no	Sets the minimum selectable date.
[maxDate]	Date	null	no	Sets the maximum selectable date.

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.

Input	Type	Default	Required	Description
[disabled]	boolean	false	no	If true, the picker is readonly and can't be modified.
[showSpinners]	boolean	true	no	If true, the spinners above and below input are visible
[showSeconds]	boolean	false	no	If true, it is not possible to select seconds
[disableMinute]	boolean	false	no	If true, the minute is readonly.
[defaultTime]	Array	undefined	no	An array [hour, minute, second] for default time when the date is not yet defined.
[stepHour]	number	1	no	The number of hours to add/substract when clicking hour spinners.
[stepSecond]	number	1	no	The number of seconds to add/substract when clicking second spinners.
[stepMinute]	number	1	no	The number of minutes to add/substract when clicking minute spinners.
[color]	ThemePalette	undefined	no	Color palette to use on the datepicker's calendar.
[enableMeridian]	boolean	false	no	Whether to display 12H or 24H mode.
[touchUi]	boolean	false	no	Whether the calendar UI is in touch mode. In touch mode the calendar opens in a dialog rather than a popup and elements have more padding to allow for bigger touch targets.

Notes

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

Outputs

Output	Event Arguments	Required	Description
(onDateChange)	`EventEmitter<Date	string	number>`

Model, Interfaces and Enums used

Enums description

EnumType	Description	Notes
PickerModeEnum	Define the view mode of the picker.	Has the following values: DATETIME = 1 -> shows a picker to select date and time; DATE = 2 -> shows a date only picker and the returned time of date is set to ("00:00:00"); TIME = 3 -> shows a time only picker which returns the selected time in 3 different format (string such as "23:59", complete javascript Date object or timestamp of the selected time of the current day) based on the input type;
TimeTypeEnum	Define the input/output type of the ngModelInput value when using the time-only picker.	Has the following values: DATE = 1,STRING = 2, NUMBER = 3.

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: [e-mail]