Customizable DatePicker component for Angular 2.

Existing DatePickers do not work as they should... So we have written another one 😏

npm i angular-io-datepicker --save

You'll need to add DatePickerModule and OverlayModule to your application module. There is has to be FormsModule. If you use Model-Driven Form you'll need to add ReactiveFormModule too.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    FormsModule,
    ReactiveFormModule,
    OverlayModule,
    DatePickerModule,
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule {
}

Simply add date-picker element with options to your form:

<form #form="ngForm">
    <date-picker ngModel name="date"></date-picker>
</form>

You'll need to add form initialization to your app-component at first:

import { Component } from '@angular/core';
import { FormGroup, FormBuilder } from "@angular/forms";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      date: ''
    });
  }
}

And then add date-picker element to your form:

<form [formGroup]="form">
    <date-picker formControlName="date"></date-picker>
</form>

Options can be passed to an element via html attributes:

This project is licensed under the MIT license. See the LICENSE file for more info.