Skip to main content

​
Overview

The DatePicker component provides a comprehensive calendar interface for selecting dates. It supports both single date selection and date range selection modes, with keyboard navigation and accessibility features.

​
Component Selector

<magary-datepicker />

​
Basic Usage

import { Component } from '@angular/core';
import { MagaryDatePicker } from 'ng-magary';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [MagaryDatePicker, FormsModule],
  template: `
    <magary-datepicker
      [(ngModel)]="selectedDate"
      placeholder="Select a date"
    />
  `
})
export class DemoComponent {
  selectedDate: Date | null = null;
}

​
Date Range Selection

<magary-datepicker
  [(ngModel)]="dateRange"
  [selectionMode]="'range'"
  placeholder="Select date range"
/>

dateRange: Date[] = [];

​
With Min/Max Dates

<magary-datepicker
  [(ngModel)]="selectedDate"
  [minDate]="minDate"
  [maxDate]="maxDate"
  placeholder="Select a date"
/>

minDate = new Date(2024, 0, 1); // January 1, 2024
maxDate = new Date(2024, 11, 31); // December 31, 2024
selectedDate: Date | null = null;

​
Properties

​
placeholder
string
Placeholder text displayed when no date is selected
​
disabled
boolean
default:"false"
When true, prevents user interaction with the date picker
​
minDate
Date
Minimum selectable date. Dates before this will be disabled
​
maxDate
Date
Maximum selectable date. Dates after this will be disabled
​
selectionMode
'single' | 'range'
default:"'single'"
Selection mode:
  • single: Select a single date
  • range: Select a date range (start and end dates)

​
Events

​
onSelect
output<Date | Date[]>
Emitted when a date or date range is selected. Returns a single Date in single mode or Date[] in range mode

​
Form Integration

The DatePicker component implements ControlValueAccessor and works seamlessly with Angular forms.

​
Reactive Forms

import { FormControl, ReactiveFormsModule } from '@angular/forms';

date = new FormControl<Date | null>(null);

<magary-datepicker [formControl]="date" />

​
Template-Driven Forms

<magary-datepicker
  [(ngModel)]="selectedDate"
  name="date"
/>

​
Keyboard Navigation

The DatePicker supports comprehensive keyboard navigation:
KeyAction
Enter / SpaceOpen/close the calendar, or select the active date
EscapeClose the calendar
Arrow KeysNavigate between dates in the calendar
HomeMove to the start of the week
EndMove to the end of the week
Page UpMove to the previous month
Page DownMove to the next month
Arrow Down (when closed)Open the calendar

​
Accessibility Features

  • Full ARIA support with proper roles and labels
  • Keyboard navigation for date selection
  • Screen reader announcements for date navigation
  • Focus management between trigger and calendar
  • Disabled state handling

​
Value Format

The component accepts and returns:
  • Single mode: Date object or null
  • Range mode: Date[] array with 1-2 elements, or null
    • One element: Start date selected, end date pending
    • Two elements: Complete date range [startDate, endDate]

​
Styling

The DatePicker uses the selector magary-datepicker and includes the following CSS classes:
  • .magary-datepicker: Main container
  • .magary-datepicker-trigger: The input trigger button
  • .magary-datepicker-panel: The calendar dropdown panel
  • .magary-datepicker-calendar: Calendar grid container
  • .magary-datepicker-day: Individual day cells
  • .selected: Applied to selected dates
  • .today: Applied to today’s date
  • .disabled: Applied to disabled dates

​
Complete Example

import { Component } from '@angular/core';
import { MagaryDatePicker } from 'ng-magary';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-datepicker-demo',
  standalone: true,
  imports: [MagaryDatePicker, FormsModule],
  template: `
    <div class="demo-container">
      <h3>Single Date Selection</h3>
      <magary-datepicker
        [(ngModel)]="singleDate"
        [minDate]="minDate"
        [maxDate]="maxDate"
        placeholder="Select a date"
        (onSelect)="onDateSelect($event)"
      />
      <p *ngIf="singleDate">Selected: {{ singleDate | date }}</p>

      <h3>Date Range Selection</h3>
      <magary-datepicker
        [(ngModel)]="dateRange"
        [selectionMode]="'range'"
        placeholder="Select date range"
        (onSelect)="onRangeSelect($event)"
      />
      <p *ngIf="dateRange?.length === 2">
        Range: {{ dateRange[0] | date }} - {{ dateRange[1] | date }}
      </p>
    </div>
  `
})
export class DatePickerDemoComponent {
  singleDate: Date | null = null;
  dateRange: Date[] = [];
  minDate = new Date(2024, 0, 1);
  maxDate = new Date(2024, 11, 31);

  onDateSelect(date: Date) {
    console.log('Date selected:', date);
  }

  onRangeSelect(range: Date[]) {
    console.log('Range selected:', range);
  }
}

Build docs developers (and LLMs) love

Get started for freeTalk to us