Date Picker

import { Component } from '@angular/core';
import { WrDatePicker, WrDateRangePicker } from 'ngwr/date-picker';

@Component({ imports: [WrDatePicker, WrDateRangePicker] })
export class MyComponent {}

<wr-date-picker [(value)]="picked" placeholder="Pick a date" />

<wr-date-picker [(value)]="picked" format="dd.MM.yyyy" />

<wr-date-picker
  [(value)]="picked"
  [min]="today"
  [max]="firstOfNextMonth"
  [dateFilter]="isWeekday"
/>

<wr-date-picker #dueField [(value)]="due" format="dd.MM.yyyy" [min]="today" />

@if (dueField.inputError(); as error) {
  <small>{{ error.message }}</small>
}

<wr-date-picker mode="time" [(value)]="picked" />

<wr-date-picker mode="time" timeFormat="24h" [(value)]="picked" />

<wr-date-picker
  mode="time"
  timeFormat="24h"
  [showSeconds]="true"
  [step]="5"
  [(value)]="picked"
/>

<wr-date-picker mode="datetime" [(value)]="when" />

<wr-date-picker
  mode="datetime"
  format="dd.MM.yyyy HH:mm:ss"
  timeFormat="24h"
  [showSeconds]="true"
  [step]="5"
  [(value)]="when"
/>

import { type WrDateRange, WrDateRangePicker } from 'ngwr/date-picker';

@Component({ imports: [WrDateRangePicker] })
export class MyComponent {
  protected readonly period = signal<WrDateRange | null>(null);
}

<wr-date-range-picker
  [(value)]="period"
  startPlaceholder="From"
  endPlaceholder="To"
/>

<wr-date-range-picker
  mode="datetime"
  timeFormat="24h"
  format="dd.MM.yyyy HH:mm"
  [(value)]="window"
/>

<!-- Signal Forms -->
<wr-date-picker [formField]="form.due" />

<!-- Reactive forms -->
<form [formGroup]="form">
  <wr-form-field label="Due date" required>
    <wr-date-picker formControlName="due" placeholder="Pick a date" />
    <wr-form-error key="required">Pick a due date.</wr-form-error>
  </wr-form-field>
</form>

<!-- The range picker's value is WrDateRange | null. -->
<wr-date-range-picker formControlName="period" />

<!-- ngModel -->
<wr-date-picker [(ngModel)]="due" name="due" />

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

import { type WrDateRange, WrDatePicker, WrDateRangePicker } from 'ngwr/date-picker';
import { WrFormError, WrFormField } from 'ngwr/form';

@Component({
  imports: [ReactiveFormsModule, WrFormField, WrFormError, WrDatePicker, WrDateRangePicker],
  templateUrl: './my.html',
})
export class MyComponent {
  protected readonly form = new FormGroup({
    due: new FormControl<Date | null>(null, Validators.required),
    period: new FormControl<WrDateRange | null>(null),
  });
}