<commit_before>![alt tag](https://github.com/doenikoe/az-idatepicker/raw/master/screenshot.png)

# 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 <az-idatepicker> from you template:
```angular2html
    <az-idatepicker
      id="myDateId"
      name="myDateName"
      placeholder="az-idatepicker"
      customSymbol="S-S-R-K-J-S-M"
      locale="id"
      format="YYYY-MM-DD"
      idatePickerBinding="yourBinding"
    ></az-idatepicker>
```

# API
| Parameter          	| Type    	| Description                                                                                         	|
|-----------------------|-----------|-------------------------------------------------------------------------------------------------------|
| id                 	| string  	| ID of component                                                                                     	|
| name               	| string  	| Name of component                                                                                   	|
| placeholder        	| string  	| Text to shown if the datepicker is empty                                                            	|
| customSymbol       	| string  	| List of custom day symbol at the header, it started from monday and each symbol separated by 'dash' 	|
| locale             	| string   	| Use momentjs (http://momentjs.com/) locale files                                                    	|
| format             	| string  	| The date format, default to 'YYYY-MM-DD'                                                            	|
| idatePickerBinding 	| any     	| Binding for ngModel                                                                                 	|

# TODO
- Improve UI and documentation
- Add more API
- Create a sample app<commit_msg>update readme, add events documentation<commit_after>![alt tag](https://github.com/doenikoe/az-idatepicker/raw/master/screenshot.png)

# 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 <az-idatepicker> from your template:
```angular2html
    <az-idatepicker
        id="myInput"
        [name]="'myInputName'"
        [placeholder]="'Testing'"
        [customSymbol]="'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    	| Description                                                                                         	|
|-----------------------|-----------|-------------------------------------------------------------------------------------------------------|
| id                 	| string  	| ID of component                                                                                     	|
| name               	| string  	| Name of component                                                                                   	|
| placeholder        	| string  	| Text to shown if the datepicker is empty                                                            	|
| customSymbol       	| string  	| List of custom day symbol at the header, it started from monday and each symbol separated by 'dash' 	|
| locale             	| string   	| Use momentjs (http://momentjs.com/) locale files                                                    	|
| format             	| string  	| The date format, default to 'YYYY-MM-DD'                                                            	|
| idatePickerBinding 	| object   	| Binding for ngModel                                                                                 	|
  
## Events
| Name                  | Return Type  | Description                                                                                        |
|-----------------------|--------------|----------------------------------------------------------------------------------------------------|
| onSelect              | string       | Return selected date. This event triggered after you select a date and click the <b>ok</b> button

# TODO
- Improve UI and documentation
- Add more API
- Create a sample app
{'fraction_non_alphanumeric': 0.16803670426304723, 'fraction_numerical': 0.003823360734085261, 'mean_word_length': 1.0566037735849056, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 11, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 41, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3446029', 'n_tokens_mistral': 1282, 'n_tokens_neox': 1224, 'n_words': 306}