Flatpickr | Hybrix - HTML5 Admin & Dashboard Template Documentation

Datepicker

OverviewOfficial Website

Datepicker is a highly configurable component that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges.The easiest way to add the datepicker component to your app (will be added to the root module)

Add Package

ng add ngx-bootstrap  --component datepicker

Import

import { BsDatepickerModule } from 'ngx-bootstrap/datepicker'; in your module.ts file

Datepicker Examples

Title	HTML
Basic	`<input class="form-control" bsDatepicker [bsConfig]="{ containerClass: theme-blue, showWeekNumbers: false }">`
DateTime	`<input class="form-control" bsDatepicker type="text" [bsConfig]="{ containerClass: 'theme-blue',showWeekNumbers: false,withTimepicker:true }" >`
Human-Friendly Dates	`<input type="text" class="form-control flatpickr-input" bsDatepicker [bsConfig]="{ dateInputFormat: 'DD MMM,YYYY',containerClass: 'theme-blue',showWeekNumbers: false }">`
MinDate and MaxDate	`<input type="text" class="form-control" bsDatepicker [minDate]="minDate" [maxDate]="maxDate" [bsConfig]="{ containerClass: theme-blue, showWeekNumbers: false }">`
Range	`<input class="form-control" bsDaterangepicker type="text" [bsConfig]="{ dateInputFormat: 'DD MMM, YYYY',containerClass: 'theme-blue' ,showWeekNumbers: false}">`
Week Numbers	`<input class="form-control" flatpickr-input" type="text" bsDatepicker [bsConfig]="{ showWeekNumbers: true,containerClass: 'theme-blue' }">`
Inline Date Picker Demo	`<bs-datepicker-inline [bsValue]="bsInlineValue" ></bs-datepicker-inline>`