Date & Time

/**
 * Date picker component for single date selection
 */
class MatDatepicker<D> implements OnDestroy, CanColor {
  @Input() calendarHeaderComponent: ComponentType<any>;
  @Input() startAt: D | null;
  @Input() startView: 'month' | 'year' | 'multi-year';
  @Input() color: ThemePalette;
  @Input() touchUi: boolean;
  @Input() disabled: boolean;
  @Input() xPosition: DatepickerDropdownPositionX;
  @Input() yPosition: DatepickerDropdownPositionY;
  @Input() restoreFocus: boolean;
  @Input() dateClass: MatCalendarCellClassFunction<D>;
  @Input() panelClass: string | string[];
  @Input() opened: boolean;
  
  @Output() readonly yearSelected: EventEmitter<D>;
  @Output() readonly monthSelected: EventEmitter<D>;
  @Output() readonly viewChanged: EventEmitter<MatCalendarView>;
  @Output() readonly openedStream: EventEmitter<void>;
  @Output() readonly closedStream: EventEmitter<void>;
  
  readonly _popupRef: OverlayRef | null;
  readonly _model: MatDateSelectionModel<DateRange<D>, D>;
  
  open(): void;
  close(): void;
  select(date: D): void;
  _selectYear(normalizedYear: D): void;
  _selectMonth(normalizedMonth: D): void;
  _getOpenedStateAriaLabel(): string;
}

/**
 * Date range picker component
 */
class MatDateRangePicker<D> extends MatDatepicker<DateRange<D>> {
  // Date range selection picker
}

/**
 * Date picker input directive
 */
class MatDatepickerInput<D> implements MatDatepickerControl<D>, OnDestroy {
  @Input() matDatepicker: MatDatepicker<D>;
  @Input() matDatepickerFilter: DateFilterFn<D>;
  @Input() value: D | null;
  @Input() min: D | null;
  @Input() max: D | null;
  @Input() disabled: boolean;
  
  @Output() readonly dateChange: EventEmitter<MatDatepickerInputEvent<D, MatDatepickerInput<D>>>;
  @Output() readonly dateInput: EventEmitter<MatDatepickerInputEvent<D, MatDatepickerInput<D>>>;
  
  readonly stateChanges: Observable<void>;
  readonly errorState: boolean;
  readonly empty: boolean;
  readonly shouldLabelFloat: boolean;
  
  getConnectedOverlayOrigin(): ElementRef;
  getPopupConnectionElementRef(): ElementRef;
  getThemePalette(): ThemePalette;
  getOverlayLabelId(): string | null;
}

/**
 * Date range input component
 */
class MatDateRangeInput<D> implements MatFormFieldControl<DateRange<D>>, AfterContentInit, OnChanges, OnDestroy {
  @Input() rangePicker: MatDateRangePicker<D>;
  @Input() required: boolean;
  @Input() dateFilter: DateFilterFn<D>;
  @Input() min: D | null;
  @Input() max: D | null;
  @Input() disabled: boolean;
  @Input() value: DateRange<D> | null;
  @Input() comparisonStart: D | null;
  @Input() comparisonEnd: D | null;
  @Input() separator: string;
  
  readonly controlType: string;
  readonly focused: boolean;
  readonly empty: boolean;
  readonly shouldLabelFloat: boolean;
  readonly errorState: boolean;
  readonly stateChanges: Observable<void>;
  
  onContainerClick(): void;
  setDescribedByIds(ids: string[]): void;
  focus(origin?: FocusOrigin): void;
  _getInputMirror(part: 'start' | 'end'): HTMLElement;
}

/**
 * Date picker toggle button
 */
class MatDatepickerToggle<D> implements OnChanges, OnDestroy, AfterContentInit {
  @Input('for') datepicker: MatDatepicker<D>;
  @Input() tabIndex: number | null;
  @Input() disabled: boolean;
  @Input() disableRipple: boolean;
  
  readonly _stateChanges: Subscription;
  
  open(event: Event): void;
  _getToggleIconId(): string;
}

/**
 * Date picker content component
 */
class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>> implements OnInit, AfterViewInit, OnDestroy {
  readonly datepicker: MatDatepicker<S>;
  readonly color: ThemePalette;
  
  _isAbove(): boolean;
  _animationDone(): void;
  _startExitAnimation(): void;
}

/**
 * Date picker input event
 */
class MatDatepickerInputEvent<D, S = unknown> {
  constructor(
    public target: S,
    public targetElement: HTMLElement
  );
  
  readonly value: D | null;
}

/**
 * Date picker actions container
 */
class MatDatepickerActions implements AfterViewInit, OnDestroy {
  readonly _datepicker: MatDatepicker<unknown>;
  readonly _viewContainerRef: ViewContainerRef;
}

/**
 * Start date directive for range selection
 */
class MatStartDate<D> extends MatDatepickerInput<D> {
  // Start date for date range
}

/**
 * End date directive for range selection
 */
class MatEndDate<D> extends MatDatepickerInput<D> {
  // End date for date range
}

type DatepickerDropdownPositionX = 'start' | 'end';
type DatepickerDropdownPositionY = 'above' | 'below';
type DateFilterFn<D> = (date: D | null) => boolean;

/**
 * Date picker control interface
 */
interface MatDatepickerControl<D> {
  getConnectedOverlayOrigin(): ElementRef;
  getPopupConnectionElementRef(): ElementRef;
  getThemePalette(): ThemePalette;
  getOverlayLabelId(): string | null;
}

/**
 * Date picker panel interface
 */
interface MatDatepickerPanel<C extends MatDatepickerControl<D>, S, D = ExtractDateTypeFromSelection<S>> {
  readonly panelId: string;
  readonly _model: MatDateSelectionModel<S, D>;
  color: ThemePalette;
  touchUi: boolean;
  
  select(date: D): void;
  registerInput(input: C): MatDateSelectionModel<S, D>;
}

/**
 * Date picker module
 */
class MatDatepickerModule {
  // NgModule for datepicker functionality
}

/**
 * Calendar component with navigation
 */
class MatCalendar<D> implements OnDestroy, OnChanges, OnInit, AfterContentInit {
  @Input() headerComponent: ComponentType<any>;
  @Input() startAt: D | null;
  @Input() startView: MatCalendarView;
  @Input() selected: DateRange<D> | D | null;
  @Input() minDate: D | null;
  @Input() maxDate: D | null;
  @Input() dateFilter: DateFilterFn<D>;
  @Input() dateClass: MatCalendarCellClassFunction<D>;
  @Input() comparisonStart: D | null;
  @Input() comparisonEnd: D | null;
  @Input() startDateAccessibleName: string | null;
  @Input() endDateAccessibleName: string | null;
  
  @Output() readonly selectedChange: EventEmitter<D | null>;
  @Output() readonly yearSelected: EventEmitter<D>;
  @Output() readonly monthSelected: EventEmitter<D>;
  @Output() readonly viewChanged: EventEmitter<MatCalendarView>;
  @Output() readonly _userSelection: EventEmitter<MatCalendarUserEvent<D | null>>;
  @Output() readonly _userDragDrop: EventEmitter<MatCalendarUserEvent<DateRange<D>>>;
  
  readonly currentView: MatCalendarView;
  readonly monthView: MatMonthView<D>;
  readonly yearView: MatYearView<D>;
  readonly multiYearView: MatMultiYearView<D>;
  
  updateTodaysDate(): void;
  _dateSelected(event: MatCalendarUserEvent<D | null>): void;
  _yearSelectedInMultiYearView(normalizedYear: D): void;
  _monthSelectedInYearView(normalizedMonth: D): void;
  _goToDateInView(date: D, view: 'month' | 'year' | 'multi-year'): void;
}

/**
 * Calendar body component for rendering calendar grids
 */
class MatCalendarBody implements OnChanges, OnDestroy, AfterViewChecked {
  @Input() label: string;
  @Input() rows: MatCalendarCell[][];
  @Input() todayValue: number;
  @Input() startValue: number;
  @Input() endValue: number;
  @Input() labelMinRequiredCells: number;
  @Input() numCols: number;
  @Input() activeCell: number;
  @Input() isRange: boolean;
  @Input() cellAspectRatio: number;
  @Input() comparisonStart: number | null;
  @Input() comparisonEnd: number | null;
  @Input() previewStart: number | null;
  @Input() previewEnd: number | null;
  @Input() startDateAccessibleName: string | null;
  @Input() endDateAccessibleName: string | null;
  
  @Output() readonly selectedValueChange: EventEmitter<MatCalendarUserEvent<number>>;
  @Output() readonly previewChange: EventEmitter<MatCalendarUserEvent<MatCalendarCell | null>>;
  @Output() readonly activeDateChange: EventEmitter<MatCalendarUserEvent<number>>;
  @Output() readonly dragStarted: EventEmitter<MatCalendarUserEvent<D>>;
  @Output() readonly dragEnded: EventEmitter<MatCalendarUserEvent<DateRange<D>>>;
  
  _cellClicked(cell: MatCalendarCell, event: MouseEvent): void;
  _emitActiveDateChange(cell: MatCalendarCell, event: FocusEvent): void;
  _focusActiveCell(movePreview?: boolean): void;
  _isActiveCell(rowIndex: number, colIndex: number): boolean;
}

/**
 * Month view component
 */
class MatMonthView<D> implements OnInit, AfterContentInit, OnDestroy {
  @Input() activeDate: D;
  @Input() selected: DateRange<D> | D | null;
  @Input() minDate: D | null;
  @Input() maxDate: D | null;
  @Input() dateFilter: DateFilterFn<D>;
  @Input() dateClass: MatCalendarCellClassFunction<D>;
  @Input() comparisonStart: D | null;
  @Input() comparisonEnd: D | null;
  @Input() startDateAccessibleName: string | null;
  @Input() endDateAccessibleName: string | null;
  @Input() activeDrag: MatCalendarUserDragEvent<D> | null;
  
  @Output() readonly selectedChange: EventEmitter<D | null>;
  @Output() readonly _userSelection: EventEmitter<MatCalendarUserEvent<D | null>>;
  @Output() readonly dragStarted: EventEmitter<MatCalendarUserDragEvent<D>>;
  @Output() readonly dragEnded: EventEmitter<MatCalendarUserDragEvent<DateRange<D>>>;
  @Output() readonly activeDateChange: EventEmitter<D>;
  
  readonly _monthLabel: string;
  readonly _weeks: MatCalendarCell[][];
  readonly _todayDate: number | null;
  readonly _selectedDate: number | null;
  
  _dateSelected(event: MatCalendarUserEvent<number>): void;
  _handleCalendarBodyInit(body: MatCalendarBody): void;
  _focusActiveCell(): void;
}

/**
 * Year view component
 */
class MatYearView<D> implements OnInit, OnDestroy {
  @Input() activeDate: D;
  @Input() selected: DateRange<D> | D | null;
  @Input() minDate: D | null;
  @Input() maxDate: D | null;
  @Input() dateFilter: DateFilterFn<D>;
  @Input() dateClass: MatCalendarCellClassFunction<D>;
  
  @Output() readonly selectedChange: EventEmitter<D>;
  @Output() readonly monthSelected: EventEmitter<D>;
  @Output() readonly activeDateChange: EventEmitter<D>;
  
  readonly _yearLabel: string;
  readonly _months: MatCalendarCell[][];
  readonly _selectedMonth: number | null;
  readonly _todayMonth: number | null;
  
  _monthSelected(event: MatCalendarUserEvent<number>): void;
  _handleCalendarBodyInit(body: MatCalendarBody): void;
  _focusActiveCell(): void;
}

/**
 * Multi-year view component
 */
class MatMultiYearView<D> implements OnInit, OnDestroy {
  @Input() activeDate: D;
  @Input() selected: DateRange<D> | D | null;
  @Input() minDate: D | null;
  @Input() maxDate: D | null;
  @Input() dateFilter: DateFilterFn<D>;
  @Input() dateClass: MatCalendarCellClassFunction<D>;
  
  @Output() readonly selectedChange: EventEmitter<D>;
  @Output() readonly yearSelected: EventEmitter<D>;
  @Output() readonly activeDateChange: EventEmitter<D>;
  
  readonly _years: MatCalendarCell[][];
  readonly _selectedYear: number | null;
  readonly _todayYear: number | null;
  readonly _yearLabel: string;
  
  _yearSelected(event: MatCalendarUserEvent<number>): void;
  _handleCalendarBodyInit(body: MatCalendarBody): void;
  _focusActiveCell(): void;
}

/**
 * Constants for multi-year view
 */
const yearsPerPage = 24;
const yearsPerRow = 4;

type MatCalendarView = 'month' | 'year' | 'multi-year';
type MatCalendarCellClassFunction<D> = (date: D, view: 'month' | 'year' | 'multi-year') => MatCalendarCellCssClasses;
type MatCalendarCellCssClasses = string | string[] | Set<string> | { [key: string]: any };

/**
 * Calendar cell interface
 */
interface MatCalendarCell<D = any> {
  value: number;
  displayValue: string;
  ariaLabel: string;
  enabled: boolean;
  cssClasses: MatCalendarCellCssClasses;
  compareValue: number;
  rawValue?: D;
}

/**
 * Calendar user event interface
 */
interface MatCalendarUserEvent<D> {
  value: D;
  event: Event;
}

/**
 * Calendar user drag event interface
 */
interface MatCalendarUserDragEvent<D> extends MatCalendarUserEvent<D> {
  event: MouseEvent;
}

/**
 * Time picker component
 */
class MatTimepicker {
  @Input() value: string;
  @Input() disabled: boolean;
  @Input() format: 12 | 24;
  @Input() min: string;
  @Input() max: string;
  @Input() step: number;
  @Input() options: MatTimepickerOption[];
  
  @Output() readonly valueChange: EventEmitter<string>;
  @Output() readonly openedChange: EventEmitter<boolean>;
  
  readonly opened: boolean;
  
  open(): void;
  close(): void;
  toggle(): void;
}

/**
 * Time picker input directive
 */
class MatTimepickerInput {
  @Input() matTimepicker: MatTimepicker;
  @Input() value: string;
  @Input() disabled: boolean;
  
  @Output() readonly valueChange: EventEmitter<string>;
  
  readonly stateChanges: Observable<void>;
  readonly errorState: boolean;
  readonly focused: boolean;
  readonly empty: boolean;
  
  focus(): void;
}

/**
 * Time picker toggle button
 */
class MatTimepickerToggle {
  @Input('for') timepicker: MatTimepicker;
  @Input() disabled: boolean;
  @Input() disableRipple: boolean;
  @Input() tabIndex: number;
  
  open(event: Event): void;
}

/**
 * Time picker option interface
 */
interface MatTimepickerOption {
  value: string;
  label: string;
  disabled?: boolean;
}

/**
 * Time picker configuration
 */
interface MatTimepickerConfig {
  format?: 12 | 24;
  step?: number;
}

/**
 * Time picker configuration injection token
 */
const MAT_TIMEPICKER_CONFIG: InjectionToken<MatTimepickerConfig>;

/**
 * Time picker module
 */
class MatTimepickerModule {
  // NgModule for timepicker functionality
}

/**
 * Abstract date adapter class
 */
abstract class DateAdapter<D> {
  protected locale: any;
  
  abstract parse(value: any, parseFormat: any): D | null;
  abstract format(date: D, displayFormat: any): string;
  abstract addCalendarYears(date: D, years: number): D;
  abstract addCalendarMonths(date: D, months: number): D;
  abstract addCalendarDays(date: D, days: number): D;
  abstract getYear(date: D): number;
  abstract getMonth(date: D): number;
  abstract getDate(date: D): number;
  abstract getDayOfWeek(date: D): number;
  abstract getMonthNames(style: 'long' | 'short' | 'narrow'): string[];
  abstract getDateNames(): string[];
  abstract getDayOfWeekNames(style: 'long' | 'short' | 'narrow'): string[];
  abstract getYearName(date: D): string;
  abstract getFirstDayOfWeek(): number;
  abstract getNumDaysInMonth(date: D): number;
  abstract clone(date: D): D;
  abstract createDate(year: number, month: number, date: number): D;
  abstract today(): D;
  abstract isDateInstance(obj: any): boolean;
  abstract isValid(date: D): boolean;
  abstract invalid(): D;
  
  compareDate(first: D, second: D): number;
  sameDate(first: D | null, second: D | null): boolean;
  clampDate(date: D, min?: D | null, max?: D | null): D;
  deserialize(value: any): D | null;
  setLocale(locale: any): void;
}

/**
 * Native JavaScript Date adapter
 */
class NativeDateAdapter extends DateAdapter<Date> {
  parse(value: any): Date | null;
  format(date: Date, displayFormat: any): string;
  addCalendarYears(date: Date, years: number): Date;
  addCalendarMonths(date: Date, months: number): Date;
  addCalendarDays(date: Date, days: number): Date;
  getYear(date: Date): number;
  getMonth(date: Date): number;
  getDate(date: Date): number;
  getDayOfWeek(date: Date): number;
  getMonthNames(style: 'long' | 'short' | 'narrow'): string[];
  getDateNames(): string[];
  getDayOfWeekNames(style: 'long' | 'short' | 'narrow'): string[];
  getYearName(date: Date): string;
  getFirstDayOfWeek(): number;
  getNumDaysInMonth(date: Date): number;
  clone(date: Date): Date;
  createDate(year: number, month: number, date: number): Date;
  today(): Date;
  isDateInstance(obj: any): boolean;
  isValid(date: Date): boolean;
  invalid(): Date;
}

/**
 * Date formats interface
 */
interface MatDateFormats {
  parse: {
    dateInput: any;
  };
  display: {
    dateInput: any;
    monthYearLabel: any;
    dateA11yLabel: any;
    monthYearA11yLabel: any;
  };
}

/**
 * Native date formats constant
 */
const MAT_NATIVE_DATE_FORMATS: MatDateFormats;

/**
 * Date formats injection token
 */
const MAT_DATE_FORMATS: InjectionToken<MatDateFormats>;

/**
 * Native date module
 */
class NativeDateModule {
  // NgModule for native Date functionality
}

/**
 * Material native date module
 */
class MatNativeDateModule {
  // NgModule for Material + native Date
}

/**
 * Provider function for native date adapter
 */
function provideNativeDateAdapter(formats?: MatDateFormats): Provider[];

/**
 * Date range class
 */
class DateRange<D> {
  constructor(
    readonly start: D | null,
    readonly end: D | null
  ) {}
}

/**
 * Abstract date selection model
 */
abstract class MatDateSelectionModel<S, D = ExtractDateTypeFromSelection<S>> {
  protected _selectionChanged = new Subject<DateSelectionModelChange<S>>();
  
  readonly selectionChanged: Observable<DateSelectionModelChange<S>>;
  readonly selection: S;
  
  abstract isSelected(date: D): boolean;
  abstract isComplete(): boolean;
  abstract clone(): MatDateSelectionModel<S, D>;
  
  updateSelection(date: D, source: unknown): void;
}

/**
 * Single date selection model
 */
class MatSingleDateSelectionModel<D> extends MatDateSelectionModel<D | null, D> {
  constructor(adapter: DateAdapter<D>);
  
  isSelected(date: D): boolean;
  isComplete(): boolean;
  clone(): MatSingleDateSelectionModel<D>;
  add(date: D): void;
}

/**
 * Date range selection model
 */
class MatRangeDateSelectionModel<D> extends MatDateSelectionModel<DateRange<D>, D> {
  constructor(adapter: DateAdapter<D>);
  
  isSelected(date: D): boolean;
  isComplete(): boolean;
  clone(): MatRangeDateSelectionModel<D>;
  add(date: D): void;
}

/**
 * Date selection model change interface
 */
interface DateSelectionModelChange<S> {
  selection: S;
  source: unknown;
  oldValue?: S;
}

/**
 * Extract date type utility
 */
type ExtractDateTypeFromSelection<T> = T extends DateRange<infer D> ? D : NonNullable<T>;

/**
 * Date picker internationalization service
 */
class MatDatepickerIntl {
  readonly changes: Subject<void>;
  
  calendarLabel: string;
  openCalendarLabel: string;
  closeCalendarLabel: string;
  prevMonthLabel: string;
  nextMonthLabel: string;
  prevYearLabel: string;
  nextYearLabel: string;
  prevMultiYearLabel: string;
  nextMultiYearLabel: string;
  switchToMonthViewLabel: string;
  switchToMultiYearViewLabel: string;
  switchToYearViewLabel: string;
  startDateLabel: string;
  endDateLabel: string;
  
  formatYearRange(start: string, end: string): string;
  formatYearRangeLabel(start: string, end: string): string;
}

import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatTimepickerModule } from '@angular/material/timepicker';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { FormControl } from '@angular/forms';

@Component({
  imports: [
    MatDatepickerModule,
    MatNativeDateModule,
    MatTimepickerModule,
    MatInputModule,
    MatFormFieldModule
  ],
  template: `
    <!-- Single Date Picker -->
    <mat-form-field>
      <mat-label>Choose a date</mat-label>
      <input matInput [matDatepicker]="picker" [formControl]="date">
      <mat-hint>MM/DD/YYYY</mat-hint>
      <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>

    <!-- Date Range Picker -->
    <mat-form-field>
      <mat-label>Enter a date range</mat-label>
      <mat-date-range-input [rangePicker]="rangePicker">
        <input matStartDate placeholder="Start date">
        <input matEndDate placeholder="End date">
      </mat-date-range-input>
      <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
      <mat-datepicker-toggle matIconSuffix [for]="rangePicker"></mat-datepicker-toggle>
      <mat-date-range-picker #rangePicker></mat-date-range-picker>
    </mat-form-field>

    <!-- Time Picker -->
    <mat-form-field>
      <mat-label>Choose a time</mat-label>
      <input matInput [matTimepicker]="timePicker" [formControl]="time">
      <mat-timepicker-toggle matIconSuffix [for]="timePicker"></mat-timepicker-toggle>
      <mat-timepicker #timePicker></mat-timepicker>
    </mat-form-field>
  `
})
export class DateTimeExample {
  date = new FormControl(new Date());
  time = new FormControl('10:30');
}