@eqproject/eqp-datetimepicker-next
v0.1.3
Published
Datetime picker component - Angular Material based
Downloads
5
Readme
Table of contents
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]