az-idatepicker
Datepicker component for angular 2. See it in action here: https://plnkr.co/edit/gJu3kNJL3rnURc4e3Vml?p=preview
Installation
This components require moment.js:
npm install moment --save
Install az-idatepicker:
npm install az-idatepicker --save
Usage
import IDatePickerModule into your app module:
import {IDatePickerModule} from 'az-idatepicker';
@NgModule({
imports: [
IDatePickerModule,
...
],
declarations: [
...
],
bootstrap: [...]
})
Call from your template:
<az-idatepicker
id="myInput"
[name]="'myInputName'"
[placeholder]="'Testing'"
[dayLabels]="['S','S','R','K','J','S','M']"
[locale]="'id'"
[format]="'YYYY-MM-DD'"
[idatePickerBinding]="model.date"
(onSelect)="setDate($event)"
></az-idatepicker>
API
Attributes
Parameter | Type | Is Required | Default Value | Description |
---|---|---|---|---|
id | string | no | - | ID of component |
name | string | no | - | Name of component |
placeholder | string | no | - | Text to shown if the datepicker is empty |
dayLabels | Array | yes | - | Day labels visible at header, it started from monday and each symbol separated by 'dash' |
locale | string | no | en-ca | Use momentjs (http://momentjs.com/) locale files |
format | string | no | YYYY-MM-DD | The date format, default to 'YYYY-MM-DD' |
idatePickerBinding | any | no | - | Binding for ngModel |
sundayHighlight | boolean | no | false | If true then sunday will have red color |
minYear | number | no | 1970 | Minimum year |
maxYear | number | no | 2020 | Maximum year |
disableDays | Array | no | [] | Disable dates that in the defined day. Day must defined in ordered index (0=sunday, 1=monday, 2=tuesday, 3=wednesday, 4=thursday, 5=friday, 6=saturday) |
minDate, maxDate | moment | no | - | Restrict the range of selectable date with 'minDate' and 'maxDate' |
Callback Events
Name | Return Type | Description |
---|---|---|
getSelectedDate | string | Return selected date |
Exposed Method
You can use template reference variable to call exposed methods in az-idatepicker component Example:
<button (onclick)="elem.openDatePicker()">Open IDatePicker</button>
<az-idatepicker #elem
id="myInput"
[name]="'myInputName'"
[placeholder]="'Testing'"
[dayLabels]="'S-S-R-K-J-S-M'"
[locale]="'id'"
[format]="'YYYY-MM-DD'"
[idatePickerBinding]="model.date"
(onSelect)="setDate($event)"
></az-idatepicker>
Name | Args | Description |
---|---|---|
openDatePicker | - | Open date picker |
closeDatePicker | - | Close date picker |
Issues
If you found any bugs please do not hesitate to give us feedback by reporting issue in our github repository
Care for pull request ?
This page explain how to prepare your local development environment. Let's start contributing in az-idatepicker development.
Star
👉 Support us by give a star ⭐
License
- License: MIT
Author
- Author: doenikoe