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/[email protected]
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 | no | Is the ngModel to bind and sets the initial value. If not set is treted as a javascript Date object. | | [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> | no | Invoked when the selected value changes. The output type is the same as the ngModelInput type. WARNING: Do not use the old ngModelInputChange output. |

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: [email protected]