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

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:

<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:

<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:

<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:

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