WKLY — Angular date and time picker
Explore six selection modes, localization, calendar adapters, validation, and inline, dialog or overlay presentations.
WKLY is an Angular date and time selection component built around a continuous sequence of weeks rather than separate monthly pages. It provides a consistent interface for everyday inputs and more complex scheduling forms, while keeping the underlying calendar logic independent of how dates are displayed.
The date picker allows users to select a day by scrolling the calendar or entering a value manually. The time picker provides configurable time entry with locale-aware formatting and 12-hour or 24-hour display. The date and time picker combines both selections in one component without changing the value contract. The date range picker lets users choose a start and end day, with reversed selections ordered automatically. The time range picker handles intervals within the same selection interface. The date and time range picker supports choosing two complete endpoints for appointments, bookings, and other scheduled periods.
WKLY integrates with Angular forms and applies configurable minimum and maximum bounds and validation to typed and calendar input. It supports keyboard interaction, accessibility labels, and touch-friendly use on mobile devices. Each mode can be displayed inline, inside a native dialog, or through an optional Angular CDK overlay attached to an input.
Localization can change at runtime, including translated controls, calendar labels, localized digits, reading direction, and the first day of the week. Calendar adapters support alternative displays such as Hebrew or civil Hijri, while selected values remain in Gregorian UTC ISO format. Timezone conversion is left to the application, ensuring that switching calendar systems does not unexpectedly change stored values.
The interactive showcase demonstrates selection modes, calendar systems, localization, validation, and presentation options, allowing developers to test the component's behavior directly.