Import
import { PeriodSelectorModule } from '@backbase/ui-ang/period-selector'
Usage
Use the bb-period-selector-ui component to display a period navigation control. Both periodStart and periodEnd inputs are required.
<!-- Basic period selector usage -->
<bb-period-selector-ui
[periodStart]="new Date(2024, 0)"
[periodEnd]="new Date(2024, 0, 31)"
(periodChange)="onPeriodChange($event)">
</bb-period-selector-ui>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
period |
'month' |
'month' |
|
periodEnd (required) |
Date |
|
|
periodFormatters |
PeriodFormatters |
{ title: 'MMMM', start: 'mediumDate', end: 'mediumDate' } |
|
periodStart (required) |
Date |
|
period
The period input sets the period step for navigation. Currently only supports monthly periods.
<!-- Period selector with monthly navigation -->
<bb-period-selector-ui
[periodStart]="startDate"
[periodEnd]="endDate"
[period]="'month'">
</bb-period-selector-ui>
periodEnd
The periodEnd input sets the end date of the current period. This input is required and the component will throw an error if not provided.
<!-- Period selector with end date -->
<bb-period-selector-ui
[periodStart]="new Date(2024, 0, 1)"
[periodEnd]="new Date(2024, 0, 31)">
</bb-period-selector-ui>
periodFormatters
The periodFormatters input provides custom date formatting functions for different parts of the display. Accepts an object with optional formatter functions:
interface PeriodFormatters {
title?: (date: Date) => string;
start?: (date: Date) => string;
end?: (date: Date) => string;
}
<!-- Period selector with custom formatters -->
<bb-period-selector-ui
[periodStart]="startDate"
[periodEnd]="endDate"
[periodFormatters]="{
title: (date) => date.toLocaleDateString('en-US', { month: 'long', year: 'numeric' }),
start: (date) => date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }),
end: (date) => date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
}">
</bb-period-selector-ui>
periodStart
The periodStart input sets the start date of the current period. This input is required and the component will throw an error if not provided.
<!-- Period selector with start date -->
<bb-period-selector-ui
[periodStart]="new Date(2024, 0, 1)"
[periodEnd]="endDate">
</bb-period-selector-ui>
Outputs
|
Output |
Type |
Description |
|---|---|---|
|
periodChange |
EventEmitter<Period> |
Emitted when the user navigates to a different period. Contains both start and end dates of the new period |
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 labels: Navigation buttons include descriptive ARIA labels ("Go to the previous period", "Go to the next period")
- Keyboard navigation: Full keyboard support for navigation buttons with proper focus management
- Screen reader support: Proper semantic structure with time elements for date ranges
- Disabled state handling: Next button is automatically disabled when reaching the current month
- RTL support: Component automatically adapts chevron directions and date formatting for RTL languages
-
Button accessibility: Uses proper button elements with circle styling and appropriate sizing
The component automatically handles period boundaries by disabling the next button when the current period reaches the present month, preventing users from navigating to future periods.