An Angular Datetime Picker that outputs dates as moment. The npm package can be found here
Include the following in your project's NgModule declarations:
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...
@NgModule({
declarations: [
...
DatePickerComponent,
DatetimePickerComponent,
DateStartendtimePickerComponent
],
imports: [
...
FormsModule
],
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
<date-picker [date]="date" (onChange)="onChangeHandler($event)"></date-picker>
onChangeHandler(date: moment.Moment){
this.date = date;
}
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
<date-picker [date]="date" (onChange)="onChangeHandler($event)"></date-picker>
onChangeHandler(date: moment.Moment){
this.date = date;
}
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
<date-picker [startDate]="start" [endDate]="end" (onChange)="onChangeHandler($event)"></date-picker>
onChangeHandler(dates: moment.Moment[]){
this.start = dates[0];
this.end = dates[1];
}