npm package: @railinc/rl-datepicker-popup
Description: A wrapper around the ngx-bootstrap datepicker component what provides the ability to open a datepicker inside of a poppup modal.  This component provides an input element that opens a datepicker popup modal, as well as a standalone datepicker popup modal,
Author: Derek Carter
Latest version: 0.0.22

# rl-datepicker-popup
## Description
A wrapper around the ngx-bootstrap datepicker component what provides the ability to open a datepicker inside of a poppup modal.  This component provides an input element that opens a datepicker popup modal, as well as a standalone datepicker popup modal, where the develop can provide the implemenation to open and close the popup.
## Installation

1.  Install the package

```
$ npm install @railinc/rl-datepicker-popup --save
```

2.  Add the module **RlDatePickerPopupModule** to your shared or app module

``` typescript
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
...
import { RlDatePickerPopupModule }from '@railinc/rl-datepicker-popup';

@NgModule({
    imports     : [
        CommonModule,
        FormsModule,
       ...
        RlDatePickerPopupModule.forRoot()
      ],
      exports : [
        RlDatePickerPopupModule
      ]
})

export class SharedModule {
}
```

3.  Add @railinc/rl-datepicker-popup to your vendor.ts or DLLsBundlesPlugin.js

## Usage

### rl-datepikcer-input:

``` html
<rl-datepikcer-input 
    [options]="datepickerOptions"
    formControlName="someDate" OR [(ngModel)]="someDate"
    ngDefaultControl>
</rl-datepicker-input>
```

#### Parameters:
* **options**: DatePickerOptions
* **formControlName**: Use this parameter if your are using the rl-dateicker-input in the context of an Angular Reactive Form
* **ngModel**: Use this parameter if you are using rl-datepicker-input outside of an Angular Reactive Form
* **ngDefaultControl**: This parameter identifies this custom component as a form control to Angular

### rl-datepicker-popup:

``` html
<rl-datepicker-popup
    [options]="datepickerOptions"
    formControlName="someDate" OR ([ngModel])="someDate"
    [opened]="someDateOpened"
    [OpenBtn]="'someDateOpenBtn'"
    (onDateChange)="handleDateChange($event, model, 'someDate')"
    (onClose)="someDateOpened = false OR handleOnClose($event)"
    ngDefaultControl>
</rl-datepicker-popup>
```

#### Parameters:
* **options**: DatePickerOptions
* **formControlName**: Use this parameter if your are using the rl-dateicker-input in the context of an Angular Reactive Form
* **ngModel**: Use this parameter if you are using rl-datepicker-input outside of an Angular Reactive Form
* **ngDefaultControl**: This parameter identifies this custom component as a form control to Angular
* **opened**: boolean variable to identify the opened or closed state of the popup
* **OpenBtn**: string reference to the ElementRef of the button used to toggle the opened state of the popup
   * Exmaple:

``` html 
<button class="btn btn-default" type="button" #someDateOpenBtn (click)="someDateOpened = ! someDateOpened">
    <span class="glyphicon glyphicon-calendar"></span>
</button>
```

* **onDateChange**: provides the containing component the ability to handle the selected date
   * Example:

``` typescript
public handleDateChange(date: Date, model: any, property: string):void {
    if(model && model[property])
        model[property] = date;
    else
        this[property] = date;
}
```

* **onClose**: provides the containing component the ability to hanlde when the date-picker-popup is closed

## Deveopment
To generate all *.js, *.js.map and *.d.ts files:
```
$ npm run build && npm run tsc
```

## License
MIT © [Derek Carter](mailto:derek.carter@railinc.com)