Skip to main content

Date Range

This section describes the BfmDateRangeComponent component.

Usage

If you need more customization, you need to import it in your module and use it in your template.

date-range.component.ts
import { BfmDateRangeComponent } from '@celerofinancas/ui-reports';

@Component({
standalone: true,
selector: 'date-range',
imports: [BfmDateRangeComponent],
templateUrl: './date-range.component.html',
})
export class DateRangeComponent {}

Then, in your template, you can use the component like this:

date-range.component.html
<bfm-date-range 
[dateList]="dateList"
[period]="period"
[selectedYear]="selectedYear"
[type]="'Início'"
(rangeHasBeenSelected)="handleRangeHasBeenSelected($event)"
/>

Inputs

The BfmDateRangeComponent component has the following inputs:

dateList

Created date list

TypeDefault
{}[]

period

Selected period

TypeDefault
ComparativePeriod''

selectedYear

Selected Year

TypeDefault
numbernull

type

Range type: Início | Fim

TypeDefault
`"Início""Fim"

Events

The BfmDateRangeComponent component has the following events:

rangeHasBeenSelected

Returns to parent component that range has changed

Type
EventEmitter<any>