https://github.com/doenikoe/az-idatepicker
:calendar: Datepicker Component For Angular :calendar:
https://github.com/doenikoe/az-idatepicker
angular angular2 angular4 datepicker-component
Last synced: 6 days ago
JSON representation
:calendar: Datepicker Component For Angular :calendar:
- Host: GitHub
- URL: https://github.com/doenikoe/az-idatepicker
- Owner: doenikoe
- License: mit
- Created: 2017-01-19T04:33:31.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-04-26T08:54:21.000Z (about 8 years ago)
- Last Synced: 2025-05-24T02:20:46.286Z (about 1 month ago)
- Topics: angular, angular2, angular4, datepicker-component
- Language: CSS
- Homepage:
- Size: 1.29 MB
- Stars: 8
- Watchers: 1
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://nodei.co/npm/az-idatepicker/)
[](https://badge.fury.io/js/az-idatepicker) [](https://snyk.io/test/npm/az-idatepicker)  
# az-idatepicker
Datepicker component for angular 2. See it in action here: [https://plnkr.co/edit/gJu3kNJL3rnURc4e3Vml?p=preview](https://plnkr.co/edit/gJu3kNJL3rnURc4e3Vml?p=preview)
# Installation
This components require moment.js:
```npm
npm install moment --save
```
Install az-idatepicker:
```npm
npm install az-idatepicker --save
```
# Usage
import IDatePickerModule into your app module:
```angularjs
import {IDatePickerModule} from 'az-idatepicker';
@NgModule({
imports: [
IDatePickerModule,
...
],
declarations: [
...
],
bootstrap: [...]
})
```
Call from your template:
```angular2html
```
# 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](https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ref-vars) to call exposed methods in az-idatepicker component
Example:
```angular2html
Open 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](https://github.com/doenikoe/az-idatepicker/wiki/Building-and-testing-az-idatepicker) explain how to prepare your local development environment. Let's start contributing in az-idatepicker development.
## Star
:point_right: Support us by give a star :star:
## License
- License: MIT
## Author
- Author: doenikoe