angular-io-datePicker

Customizable DatePicker component for Angular 2.

Motivation

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

Installation

npm i angular-io-datepicker --save

Code Example

Demo

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 {
}

Template-Driven Form

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

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

Model-Driven 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>

API Reference

Options can be passed to an element via html attributes:

|Property |Type |Default |Description | | :-------------- | :---- | :-------------------------------------------------------------- | :-------------------------------------------------------------------------------- | |mode |string |date |Changes view mode - date, datetime, time | |disabled |boolean|false |Disables controls | |showClearButton|boolean|true |Show or not clear input button | |format |string | defaultFormat = {"date": "LL","datetime": "LLL","time": "LT"};|Changes view format that provides moment|

License

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