Flatpickr

OverviewOfficial Website

flatpickr is a lightweight and powerful datetime picker.

Add Package
npm install flatpickr angularx-flatpickr --save
Remove Package
npm uninstall flatpickr angularx-flatpickr or you can remove package by removing specific package from package.json
Flatpickr Examples
Title HTML
Basic
<input type="text" class="form-control" mwlFlatpickr [altInput]="true" [convertModelValue]="true">
DateTime
<input type="text" class="form-control" mwlFlatpickr [altInput]="true" [enableTime]="true" [convertModelValue]="true" altFormat="d.m.y H:i" [dateFormat]="'d.m.y H:i'">;
Human-Friendly Dates
 <input type="text" class="form-control flatpickr-input" mwlFlatpickr [altInput]="true" [convertModelValue]="true" altFormat="F j, Y" dateFormat="Y-m-d">
MinDate and MaxDate
<input type="text" class="form-control" mwlFlatpickr [altInput]="true" minDate="25-01-2023" maxDate="29-01-2023" [convertModelValue]="true" altFormat="d M, Y" dateFormat="d M, Y">
Range
 <input type="text" class="form-control" mwlFlatpickr [altInput]="true" [convertModelValue]="true" mode="range" altFormat="d M, Y" dateFormat="d M, Y">
Selecting Multiple Dates
<input type="text" class="form-control" mwlFlatpickr [altInput]="true" [convertModelValue]="true" mode="multiple" altFormat="d M, Y" dateFormat="d M, Y">
Inline Date Picker Demo
<input class="form-control flatpickr-input" type="text" mwlFlatpickr [altInput]="true" [convertModelValue]="true" [inline]="true">
Timepickr Examples:
Title HTML
Basic Timepicker
 <timepicker class="timepicker"></timepicker>
24-hour Time Picker
<timepicker class="timepicker" [showMeridian]="false"></timepicker>
Time Picker w/ Limits
 <timepicker class="timepicker" [min]="minTime" [max]="maxTime"></timepicker>
Preloading Time
 <timepicker class="timepicker" [(ngModel)]="myTime" [min]="minTime" [max]="maxTime"></timepicker>
© Steex.
Design & Develop by Themesbrand