Export Date Range Picker
Component Detail
Description
Reusable UI component for selecting a configurable start and end date for export operations. Used in both accounting export and Bufdir report export flows, enforcing valid range constraints and providing a clear visual date selection experience accessible to screen readers.
export-date-range-picker
Summaries
The Export Date Range Picker is a reusable interface element that enables coordinators to precisely define which expense claims are included in each financial export. By enforcing business rules such as preventing future-dated exports and ensuring logical date ordering, it eliminates a class of data quality errors that could result in incorrect accounting entries or compliance failures. Its accessibility support extends the product to users relying on assistive technologies, broadening the usable audience and meeting accessibility obligations. Being shared across both accounting and Bufdir reporting flows, it ensures a consistent user experience that reduces training needs and coordinator errors across all export workflows.
This is a low-complexity shared UI component delivered once and reused across at least two distinct export workflows — accounting exports and Bufdir reporting. Its shared nature means investment in quality, accessibility testing, and edge-case validation pays dividends across multiple features simultaneously. Dependencies are minimal — it has none — making it safe to develop in isolation early in the sprint. Key delivery risks include thorough accessibility testing for screen reader compatibility, which adds QA effort.
Any changes to validation rules (e.g., allowed date ranges) will affect all consumers, so regression testing must cover both accounting and Bufdir flows when this component is modified.
This frontend component exposes `setInitialRange(start, end)`, `onRangeConfirmed(DateRange)`, `clearSelection()`, `validateRange()`, and `buildDateRangePicker()` as its public interface. It runs in both web (frontend) and mobile execution contexts, requiring platform-appropriate date picker implementations while sharing validation logic. Validation enforces start-before-end and no-future-date constraints synchronously before emitting the confirmed range to the parent via callback. Accessibility labels must be applied to all interactive elements for VoiceOver/TalkBack compliance.
As a shared component, changes to its API surface require coordination with all consuming screens; keep its interface stable and use the onRangeConfirmed callback pattern to decouple it from parent state management.
Responsibilities
- Accept and validate start and end date inputs
- Enforce logical constraints (start before end, not future dates)
- Emit selected range to parent screen on confirmation
- Support accessibility labels for VoiceOver and screen readers
Interfaces
setInitialRange(start, end)
onRangeConfirmed(DateRange)
clearSelection()
validateRange()
buildDateRangePicker()