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 has to be FormsModule
. If you use Model-Driven Form you'll need to add ReactiveFormModule
too.
import { FormsModule, ReactiveFormModule } from '@angular/forms';
import { OverlayModule } from "angular-io-overlay";
import { DatePickerModule } from "angular-io-datepicker/src/datepicker/index";
@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:
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 |
isMeridiem |
boolean | As defined in the moment locale strings | Uses the 12-hours time format when true |
format |
string | defaultFormat = {"date": "LL","datetime": "LLL","time": "LT"}; |
Changes view format that provides moment |
closeBySelection |
boolean | false |
Close modal by selection (just when mode=='date') |
inputClass |
string | '' |
Additional css-class to be added to input element |
This project is licensed under the MIT license. See the LICENSE file for more info.