Datepicker
Angular Bootstrap 5 Datepicker
Date picker is a plugin that adds the function of selecting time without the necessity of using custom JavaScript code.
Note: Read the API tab to find all available options and advanced customization
Basic example
The datepicker allows users to enter a date either through text input, or by choosing a date from the calendar. Date pickers can be embedded into dialogs on mobile and text field dropdowns on desktop.
Inline version
Use the [inline]="true" attribute to initialize and set the default date for an inline datepicker inside a block element.
Translations
The picker can be customized to add support for internationalization. Modify the component options to add translations.
Formats
Use format input to display date in a human-friendly format.
Formatting rules
The following rules can be used to format any date:
| Rule | Description | Result |
|---|---|---|
d | Date of the month | 1 – 31 |
dd | Date of the month with a leading zero | 01 – 31 |
ddd | Day of the week in short form | Sun – Sat |
dddd | Day of the week in full form | Sunday – Saturday |
m | Month of the year | 1 – 12 |
mm | Month of the year with a leading zero | 01 – 12 |
mmm | Month name in short form | Jan – Dec |
mmmm | Month name in full form | January – December |
yy | Year in short form * | 00 – 99 |
yyyy | Year in full form | 2000 – 2999 |
Date limits
Set the minimum and maximum selectable dates with the minDate and maxDate inputs.
Disable past
Use the minDate input to disallow past date selection.
Disable future
Use the maxDate input to disallow future date selection.
Disabled dates
The filter input accept function in which you can specify conditions for date filtering. A result of true indicates that the date should be valid and a result of false indicates that it should be disabled. In the following example all saturdays and sundays will be disabled.
Input toggle
Add (click)="datepicker.open()" method to the input element to enable toggling on input click. It is also possible to remove the toggle button.
Custom toggle icon
Icon input
You can set your custom toggle icon with [icon] input.
Icon template
If you want to use more complex toggle icon syntax you can do it by placing HTML code inside ng-template with mdbDatepickerToggleIcon directive.
Close without confirmation
With [confirmDateOnSelect] set to true datepicker will close automatically after date selection
Custom header content
You can customize the content of the header by using the mdbDatepickerHeader directive. Simply pass HTML code inside ng-template with directive.
Validation
Use mdbValidate directive to enable validation styles and mdb-error and mdb-success components to display validation messages.
Note: This example uses MDB Angular Validation. Remember to import MdbValidationModule and ReactiveFormsModule to enable reactive forms validation in Angular.
Accessibility
We added proper aria attributes to the datepicker controls to make the component accessible. It's possible to change the values of those attributes by modifying the component options: