Import
import { InputDatepickerModule } from '@backbase/ui-ang/input-datepicker'
Usage
Use the bb-input-datepicker-ui component to provide a date selection input.
<!-- Basic input datepicker usage -->
<bb-input-datepicker-ui
label="Select date">
</bb-input-datepicker-ui>
Custom internationalization
The input datepicker supports custom internationalization. To provide your own translations for months, weekdays, and other calendar labels, supply a custom provider for the DATEPICKER_I18 token from @backbase/ui-ang/input-datepicker at the module level. The provider should implement the NgbDatepickerI18n interface (see Bootstrap documentation).
Setting and reading the date
Datepicker uses the date with the timezone inside its model. To ensure correct behaviour across all time zones, follow these recommendations:
Setting the date
When setting the date, provide it in a format that assumes zero hours and zero minutes in the local timezone. For example:
// Set minDate to December 15, 2021, at 00:00 local time
this.minDate = new Date(2021, 11, 15, 0, 0).toISOString();
// or
this.minDate = new Date('2021-12-15T00:00').toISOString();
Reading the date
When a date is selected via the UI, its display date is transformed to an ISO string with zero hours and minutes in the current time zone. This means the ISO string value for the same date may differ across time zones. To reliably read the selected date, convert the ISO string to a Date object and extract the day value:
private formatDate(stringDate: string): string {
const date = new Date(stringDate);
if (stringDate && !isNaN(date.valueOf())) {
return `${date.getFullYear()}-${this.appendLeadingZeroes(date.getMonth() + 1)}-${this.appendLeadingZeroes(date.getDate())}`;
}
return '';
}
private appendLeadingZeroes(value: number): string {
return value > 9 ? value.toString() : `0${value}`;
}
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
autocomplete |
string |
undefined |
|
autofocus |
boolean |
false |
|
clickOpen |
boolean |
false |
|
container |
string |
null |
|
displayMonths |
number |
1 |
|
disabled |
boolean |
false |
|
firstDayOfWeek |
number |
Locale default |
|
focusOpen |
boolean |
false |
|
icon |
string |
'calendar-today' |
|
iconColor |
string |
undefined |
|
iconSize |
string |
'md' |
|
id |
string |
A unique string |
|
inputClassName |
string |
Undefined |
|
isOpen |
boolean |
false |
|
label |
string |
'' |
|
labelTo |
string |
'' |
|
markDisabled |
Function |
undefined |
|
mask |
boolean | string |
false |
|
maxDate |
NgbDateStruct | string |
undefined |
|
minDate |
NgbDateStruct | string |
undefined |
|
overrideDateFormat |
string |
Locale default |
|
placeholder |
string |
Locale format |
|
rangeSelection |
boolean |
false |
|
rangeSelectionSplit |
boolean |
false |
|
readonly |
boolean |
false |
|
required |
boolean |
false |
|
size |
number | string |
20 |
|
startDate |
NgbDateStruct | string |
undefined |
|
value |
string | DateRangeModel |
'' |
Global configuration token
The INPUT_DATEPICKER_CONFIG_TOKEN enables you to globally set default values for the following properties for all instances of the input datepicker component in your project:
- autocomplete
- displayMonths
- firstDayOfWeek
- overrideDateFormat
- placeholder
- rangeSelection
These can be overridden per instance by setting the corresponding input.
import { INPUT_DATEPICKER_CONFIG_TOKEN } from '@backbase/ui-ang/input-datepicker';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
const inputDatepickerConfig = {
firstDayOfWeek: 1
};
platformBrowserDynamic().bootstrapModule(AppModule, {
providers: [{ provide: INPUT_DATEPICKER_CONFIG_TOKEN, useValue: inputDatepickerConfig }]
});
autocomplete
The autocomplete input sets the browser autocomplete attribute for the input. Defaults to undefined.
<!-- Input datepicker with autocomplete -->
<bb-input-datepicker-ui
autocomplete="off"
label="Select date">
</bb-input-datepicker-ui>
autofocus
The autofocus input determines whether the input should be automatically focused. Defaults to false.
<!-- Input datepicker with autofocus -->
<bb-input-datepicker-ui
[autofocus]="true"
label="Select date">
</bb-input-datepicker-ui>
clickOpen
The clickOpen input determines if the datepicker opens on input click. Defaults to false.
<!-- Input datepicker that opens on click -->
<bb-input-datepicker-ui
[clickOpen]="true"
label="Select date">
</bb-input-datepicker-ui>
container
The container input specifies the container element that the datepicker should be attached to. Defaults to null.
<!-- Input datepicker with custom container -->
<bb-input-datepicker-ui
container="body"
label="Select date">
</bb-input-datepicker-ui>
displayMonths
The displayMonths input sets how many months are shown in the picker. Defaults to 1.
<!-- Input datepicker showing two months -->
<bb-input-datepicker-ui
[displayMonths]="2"
label="Select date">
</bb-input-datepicker-ui>
disabled
The disabled input disables the input datepicker when set to true. Defaults to false.
<!-- Disabled input datepicker -->
<bb-input-datepicker-ui
[disabled]="true"
label="Select date">
</bb-input-datepicker-ui>
firstDayOfWeek
The firstDayOfWeek input sets the first day of the week in the calendar. Defaults to the locale's default.
<!-- Input datepicker with Monday as the first day of the week -->
<bb-input-datepicker-ui
[firstDayOfWeek]="1"
label="Select date">
</bb-input-datepicker-ui>
focusOpen
The focusOpen input determines if the datepicker opens on input focus. Defaults to false.
<!-- Input datepicker that opens on focus -->
<bb-input-datepicker-ui
[focusOpen]="true"
label="Select date">
</bb-input-datepicker-ui>
icon
The icon input sets the icon displayed in the calendar button. Defaults to 'calendar-today'.
<!-- Input datepicker with a custom icon -->
<bb-input-datepicker-ui
icon="calendar-alt"
label="Select date">
</bb-input-datepicker-ui>
iconColor
The iconColor input sets the color of the icon in the calendar button. Defaults to undefined.
<!-- Input datepicker with a blue icon -->
<bb-input-datepicker-ui
iconColor="blue"
label="Select date">
</bb-input-datepicker-ui>
iconSize
The iconSize input sets the size of the icon in the calendar button. Defaults to 'md'.
<!-- Input datepicker with a large icon -->
<bb-input-datepicker-ui
iconSize="lg"
label="Select date">
</bb-input-datepicker-ui>
id
The id input sets the unique identifier for the input. Defaults to a unique string.
<!-- Input datepicker with a custom id -->
<bb-input-datepicker-ui
id="custom-datepicker"
label="Select date">
</bb-input-datepicker-ui>
inputClassName
The inputClassName input adds custom class names to the input element. Defaults to undefined.
<!-- Input datepicker with a custom class -->
<bb-input-datepicker-ui
inputClassName="my-custom-class"
label="Select date">
</bb-input-datepicker-ui>
isOpen
The isOpen input determines whether the datepicker is opened initially. Defaults to false.
<!-- Input datepicker opened by default -->
<bb-input-datepicker-ui
[isOpen]="true"
label="Select date">
</bb-input-datepicker-ui>
label
The label input sets the label for the input. Defaults to an empty string.
<!-- Input datepicker with a label -->
<bb-input-datepicker-ui label="Date of birth"></bb-input-datepicker-ui>
labelTo
The labelTo input sets the label for the second input in split range mode. Defaults to an empty string.
<!-- Input datepicker with a label for the 'to' field in split range mode -->
<bb-input-datepicker-ui
[rangeSelectionSplit]="true"
label="From"
labelTo="To">
</bb-input-datepicker-ui>
markDisabled
The markDisabled input provides a callback to mark certain dates as disabled. Defaults to undefined.
<!-- Input datepicker with disabled weekends -->
<bb-input-datepicker-ui
[markDisabled]="isWeekend"
label="Select date">
</bb-input-datepicker-ui>
mask
The mask input enables or configures input masking for the date field. Can be true, false, or a string pattern (e.g., 00/00/0000). Defaults to false.
<!-- Input datepicker with a date mask -->
<bb-input-datepicker-ui
[mask]="true"
label="Select date">
</bb-input-datepicker-ui>
- When mask is true, the component creates a mask pattern based on the overrideDateFormat (or corrects it if needed).
- When mask is a string, it must be a valid pattern using allowed characters (0 for digits, S for letters, and typical date separators).
- If the provided mask pattern does not match the date format, the component will invalidate the mask and set it to undefined.
Examples
- If overrideDateFormat = 'dd/MM/yyyy' or 'MM/dd/yyyy', the created mask will be '00/00/0000'.
- If overrideDateFormat = 'MMM dd, yy', the created mask will be 'SSS 00, 00'.
- If mask is set to a string pattern (e.g., '00/00/00'), it is validated against the date format.
For more details on mask patterns, see the ngx-mask documentation.
maxDate
The maxDate input sets the maximum selectable date. Defaults to undefined.
<!-- Input datepicker with a maximum date -->
<bb-input-datepicker-ui
[maxDate]="'2025-12-31'"
label="Select date">
</bb-input-datepicker-ui>
minDate
The minDate input sets the minimum selectable date. Defaults to undefined.
<!-- Input datepicker with a minimum date -->
<bb-input-datepicker-ui
[minDate]="'2020-01-01'"
label="Select date">
</bb-input-datepicker-ui>
overrideDateFormat
The overrideDateFormat input overrides the default date format. Defaults to the locale's format.
<!-- Input datepicker with a custom date format -->
<bb-input-datepicker-ui
overrideDateFormat="yyyy/MM/dd"
label="Select date">
</bb-input-datepicker-ui>
placeholder
The placeholder input sets the placeholder text for the input. Defaults to the locale's date format.
<!-- Input datepicker with a custom placeholder -->
<bb-input-datepicker-ui
placeholder="MM/DD/YYYY"
label="Select date">
</bb-input-datepicker-ui>
rangeSelection
The rangeSelection input enables range selection mode. Defaults to false.
<!-- Input datepicker with range selection enabled -->
<bb-input-datepicker-ui
[rangeSelection]="true"
label="Select date range">
</bb-input-datepicker-ui>
rangeSelectionSplit
The rangeSelectionSplit input enables split input range selection mode. Defaults to false.
<!-- Input datepicker with split range selection -->
<bb-input-datepicker-ui
[rangeSelectionSplit]="true"
label="From"
labelTo="To">
</bb-input-datepicker-ui>
readonly
The readonly input makes the input read-only. Defaults to false.
<!-- Read-only input datepicker -->
<bb-input-datepicker-ui
[readonly]="true"
label="Select date">
</bb-input-datepicker-ui>
required
The required input marks the input as required. Defaults to false.
<!-- Required input datepicker -->
<bb-input-datepicker-ui
[required]="true"
label="Select date">
</bb-input-datepicker-ui>
size
The size input configures the minimum width to fit the specified number of characters. Defaults to 20.
<!-- Input datepicker with a custom size -->
<bb-input-datepicker-ui
[size]="30"
label="Select date">
</bb-input-datepicker-ui>
startDate
The startDate input sets the date to open the calendar with. Defaults to undefined.
<!-- Input datepicker with a specific start date -->
<bb-input-datepicker-ui
[startDate]="'2023-01-01'"
label="Select date">
</bb-input-datepicker-ui>
value
The value input sets the value of the input, which can be a string or a date range model. Defaults to an empty string.
<!-- Input datepicker with a preset value -->
<bb-input-datepicker-ui
[value]="'2024-06-01'"
label="Select date">
</bb-input-datepicker-ui>
Outputs
|
Event |
Type |
Description |
|---|---|---|
|
blur |
EventEmitter<FocusEvent> |
Emitted when the input loses focus |
|
focus |
EventEmitter<FocusEvent> |
Emitted when the input gains focus |
|
focusedDate |
EventEmitter<DateSelectionModel> |
Emitted when a date is focused in the calendar |
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.
ARIA
These inputs support WAI-ARIA compliance and are intended to improve accessibility for users relying on assistive technologies. Use them to provide meaningful semantic information for the component when additional context is needed to convey its purpose, state, or behavior.
|
Input |
Description |
Type |
|---|---|---|
|
ariaActivedescendant |
Identifies the currently active element when focus is on a composite widget |
string |
|
ariaControls |
Indicates which element(s) the widget controls |
string |
|
ariaDescribedby |
References the element that describes the widget |
string |
|
ariaExpanded |
Indicates if the control is expanded or collapsed |
string |
|
ariaInvalid |
Indicates the entered value is not in the expected format |
string |
|
ariaLabel |
Sets an accessible label when the label tag is not rendered |
string |
|
ariaLabelledby |
References elements that provide an accessible name |
string |
|
ariaOwns |
Identifies elements as part of a parent-child relationship |
string |
|
role |
Sets the ARIA role for the input |
string |