ng-datepickeradvanced

Installation

npm install ng-datepickeradvanced

Note*: Bootstrap 4.x.x is required.

import { DatePickeAdvancedModule } from 'ng-datepickeradvanced'

For dropdown style add few lines of code as followed.

• import { ABInputDirective } from 'ng-datepickeradvanced'

  <div  id="abDatePicker">
  <input  ABInput  disabled [id]="'datePicker'" (dateChange)="callFunction1($event)" />
  <i  class=" fas fa-chevron-circle-down"  for="datePicker" (click)="activateDatePicker = !activateDatePicker"></i>
  <app-date-picker-advanced [min]="min" [max]="max" [id]="'datePicker'" *ngIf="activateDatePicker"></app-date-picker-advanced>
  </div>

Note*: ID is required in case to prevent event emitter from invoking on every instance.

-

  #abDatePicker {
}
#abDatePicker > i {
    color: blueviolet;
    margin: 12px  -39px;
    font-size: 30px;
    position: absolute;
    cursor: pointer;
}

Demo

• Single Date Select

• Date Range Select

API

For: app-date-picker-advanced

For: input - derivative [ABInput]

Results

Date-Range:

{
    from: {
        date: Date,
        isValid: Boolean
    },
    to: {
        date: Date,
        isValid: Boolean
    }
}

Singular: Date