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