Date Picker

A flexible date picker component built on top of Popover and Calendar, supporting single dates, ranges, and custom formatting.

Default

Standard date picker with constraints and automatic closing on selection.

Please select a date between 2023 and 2030.

Reactive Form

Integration with Angular Reactive Forms for seamless data management and validation.

Select a date for your upcoming reservation.

Range Picker

Allows users to select a start and end date for intervals like vacations or rentals.

Vacation Period

Select both a start and an end date for your trip.

Custom Formatting

Demonstrates how to use Luxon for localized or custom date display formats.

This example uses Luxon for advanced date formatting (e.g., "MMMM dd, yyyy").

API Reference

Helm Components & Directives

The Date Picker uses a set of components and utility functions for styling and configuration.

SelectorInputsDescription
hlm-date-picker
  • min: Date
  • max: Date
  • autoCloseOnSelect: boolean
  • formatDate: (date: Date) => string
Standard date picker component.
hlm-date-range-picker
  • min: Date
  • max: Date
  • autoCloseOnEndSelection: boolean
Component for selecting date ranges.

Installation & Usage

Installation

Imports

Basic Skeleton