Date Range Picker

import {useState} from 'react';
import type {DateRange} from 'react-day-picker';
import {DateRangePicker} from '@stroeer-labs/design-library/react';

export function DateRangePickerDemo() {
    const [range, setRange] = useState<DateRange | undefined>();

    return (
        <div className="space-y-4">
            <DateRangePicker
                value={range}
                onChange={setRange}
                startLabel="Start date"
                endLabel="End date"
                startPlaceholder="Start date"
                endPlaceholder="End date"
            />
            <p className="text-xs text-muted-foreground">
                {range?.from ? range.from.toLocaleDateString() : '—'} → {range?.to ? range.to.toLocaleDateString() : '—'}
            </p>
        </div>
    );
}

import {Component, signal} from '@angular/core';
import {DateRangePicker, type DateRange} from '@stroeer-labs/design-library/angular';

@Component({
    selector: 'dl-date-range-picker-demo',
    standalone: true,
    imports: [DateRangePicker],
    template: `
    <div class="space-y-4">
      <dl-date-range-picker
        [(value)]="range"
        startLabel="Start date"
        endLabel="End date"
        startPlaceholder="Start date"
        endPlaceholder="End date"
      />
      <p class="text-xs text-muted-foreground">
        {{ range()?.from?.toLocaleDateString() ?? "—" }} →
        {{ range()?.to?.toLocaleDateString() ?? "—" }}
      </p>
    </div>
  `,
})
export class DateRangePickerDemoComponent {
    protected readonly range = signal<DateRange | undefined>(undefined);
}