angular-io-datepicker

Datepicker component for angular2

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
angular-io-datepicker
22261.3.16 years ago6 years agoMinified + gzip package size for angular-io-datepicker in KB

Readme

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

````shell 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. ```typescript @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: ```html
<date-picker ngModel name="date"></date-picker>
```
Model-Driven Form
You'll need to add form initialization to your app-component at first: ```typescript 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: ```html formGroup="form">
<date-picker formControlName="date"></date-picker>
```

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.