ng-datepickeradvanced

Installation

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

import { DatePickeAdvancedModule } from 'ng-datepickeradvanced'

For dropdown style add few lines of code as followed.

• import { DateInput } from 'ng-datepickeradvanced'

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

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

#abDatePicker > input {
  font-family: cursive;
  background-color: white;
  color: #44046d;
  height: 0;
  padding: 24.5px 47px 24.5px 16px;
  text-decoration: underline;
  font-stretch: ultra-condensed;
  font-size: 15px;
  font-weight: 700;
  width: fit-content;
}
#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

| Name | Description | ------------- |:-------------:| -----:| | @Input() min: string| The minimum valid date. | @Input() max: string| The maximum valid date. | @Input() id: string| Required if using more than one instance on same component.

For: input - derivative [DateInput]

| Name | Description | ------------- |:-------------:| -----:| | @Input() dateChange: EventEmitter< Object >| Emits the output if the value. | @Input() id: string| Required if using more than one instance on same component.

Results

Date-Range:

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

Singular: Date