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 Template
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>
© Skote.