# @eqproject/eqp-datetimepicker-next > Datetime picker component - Angular Material based Latest version **0.1.3** (published 2022-07-21) · 0 weekly downloads ## Install ```sh npm install @eqproject/eqp-datetimepicker-next pnpm add @eqproject/eqp-datetimepicker-next yarn add @eqproject/eqp-datetimepicker-next bun add @eqproject/eqp-datetimepicker-next ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.3 | | Published | 2022-07-21 | | First published | 2022-07-19 | | Weekly downloads | 0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 6 | | Unpacked size | 350.6 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | EqProject | | Maintainers | eqp | ## Links - npm: https://www.npmjs.com/package/@eqproject/eqp-datetimepicker-next - npm.io page: https://npm.io/package/@eqproject/eqp-datetimepicker-next ## Dependencies (6) - [tslib](https://npm.io/package/tslib.md) ^2.4.0 - [moment](https://npm.io/package/moment.md) ^2.29.4 - [@ngx-translate/core](https://npm.io/package/@ngx-translate/core.md) ^14.0.0 - [@ngx-translate/http-loader](https://npm.io/package/@ngx-translate/http-loader.md) ^7.0.0 - [@angular-material-components/moment-adapter](https://npm.io/package/@angular-material-components/moment-adapter.md) ^8.0.0 - [@angular-material-components/datetime-picker](https://npm.io/package/@angular-material-components/datetime-picker.md) ^8.0.0 ## Recent versions - 0.1.3 (latest) — 2022-07-21 - 0.1.2 — 2022-07-21 - 0.1.0 — 2022-07-20 - 0.0.14 — 2022-07-19 ## README Table of contents ================= * [Getting started](#getting-started) * [API](#api) * [Use cases](#use-cases) * [Credits](#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 ```shell npm install --save @eqproject/eqp-datetimepicker ``` If needed dependecies are not installed run this commands: ```shell 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 : ```js 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: ```js 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](https://www.npmjs.com/package/@angular-material-components/datetime-picker/v/2.0.4) 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` | 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 ```html ``` ```js 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 ```html ``` ```js 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 ```html ``` ```js 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 --- _Source: https://npm.io/package/@eqproject/eqp-datetimepicker-next · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._