Angular Datetime Picker for ABP

An Angular Datetime Picker set to output dates as moment.

Usage

App Module

Include the following in your project's NgModule declarations:

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...
@NgModule({
  declarations: [
    ...
    DatePickerComponent,
    DatetimePickerComponent,
    DateStartendtimePickerComponent
  ],
  imports: [
    ...
    FormsModule
  ],

Date Picker

The inital date can be set via the date input, if this is not provided the initial value will be the current date

  @Input("date") date: moment.Moment = moment(); //Optional
  @Output() onChange: EventEmitter<moment.Moment> = new EventEmitter<moment.Moment>();

The onChange event will fire if and when the date is changed and is complete

HTML

<date-picker [date]="date" (onChange)="onChangeHandler($event)"></date-picker>

Typescript

  onChangeHandler(date: moment.Moment){
    this.date = date;
  }

Datetime Picker

The inital date can be set via the date input, if this is not provided the initial value will be the current date

  @Input("date") date: moment.Moment = moment(); //Optional
  @Output() onChange: EventEmitter<moment.Moment> = new EventEmitter<moment.Moment>();

The onChange event will fire if and when the date is changed and is complete

HTML

<date-picker [date]="date" (onChange)="onChangeHandler($event)"></date-picker>

Typescript

  onChangeHandler(date: moment.Moment){
    this.date = date;
  }

Date with Start and End Times

The inital datetimes can be set via the startDate and endDate inputs, if this is not provided the initial values will be the current date and time

  @Input("startDate") startDate: moment.Moment = moment(); //Optional
  @Input("endDate") endDate: moment.Moment = moment(); //Optional
  
  @Output() onChange: EventEmitter<moment.Moment[]> = new EventEmitter<moment.Moment[]>();

The onChange event will fire if and when the date is changed and is complete

HTML

<date-picker [startDate]="start" [endDate]="end" (onChange)="onChangeHandler($event)"></date-picker>

Typescript

  onChangeHandler(dates: moment.Moment[]){
    this.start = dates[0];
    this.end = dates[1];
  }