Date Picker

'use client';

import { I18nProvider } from 'react-aria-components';
import { DatePicker } from '@/components/ui/date-picker';

export default function DatePickerDemo() {
  return (
    <I18nProvider locale="pt-BR">
      <DatePicker label="Data da visita técnica" description="Digite a data ou abra o calendário." className="w-72" />
    </I18nProvider>
  );
}

'use client';

import { getLocalTimeZone, today } from '@internationalized/date';
import { I18nProvider } from 'react-aria-components';
import { DateRangePicker } from '@/components/ui/date-picker';

export default function DatePickerRange() {
  const now = today(getLocalTimeZone());

  return (
    <I18nProvider locale="pt-BR">
      <DateRangePicker
        label="Período do relatório"
        description="Últimos 30 dias por padrão."
        defaultValue={{ start: now.subtract({ days: 29 }), end: now }}
        maxValue={now}
        className="w-80"
      />
    </I18nProvider>
  );
}

'use client';

import { getLocalTimeZone, isWeekend, today } from '@internationalized/date';
import { I18nProvider } from 'react-aria-components';
import { DatePicker } from '@/components/ui/date-picker';

export default function DatePickerUnavailable() {
  const now = today(getLocalTimeZone());

  return (
    <I18nProvider locale="pt-BR">
      <DatePicker
        label="Agendar reunião de briefing"
        description="Segunda a sexta, nos próximos 60 dias."
        minValue={now}
        maxValue={now.add({ days: 60 })}
        isDateUnavailable={(date) => isWeekend(date, 'pt-BR')}
        className="w-72"
      />
    </I18nProvider>
  );
}

'use client';

import * as React from 'react';
import { getLocalTimeZone, today, type CalendarDate } from '@internationalized/date';
import { I18nProvider } from 'react-aria-components';
import { Button } from '@/components/ui/button';
import { DatePicker } from '@/components/ui/date-picker';

export default function DatePickerControlled() {
  const [date, setDate] = React.useState<CalendarDate | null>(null);

  return (
    <I18nProvider locale="pt-BR">
      <div className="flex w-72 flex-col gap-3">
        <DatePicker label="Vencimento da fatura" value={date} onChange={setDate} />
        <div className="flex gap-2">
          <Button size="sm" variant="outline" onPress={() => setDate(today(getLocalTimeZone()).add({ days: 7 }))}>
            Daqui a 7 dias
          </Button>
          <Button size="sm" variant="ghost" onPress={() => setDate(null)}>
            Limpar
          </Button>
        </div>
        <p className="text-sm text-muted-foreground">
          Valor enviado ao servidor: <code className="font-mono text-foreground">{date ? date.toString() : 'null'}</code>
        </p>
      </div>
    </I18nProvider>
  );
}

'use client';

import { getLocalTimeZone, today } from '@internationalized/date';
import { I18nProvider } from 'react-aria-components';
import { Button } from '@/components/ui/button';
import { DatePicker, DateRangePicker } from '@/components/ui/date-picker';
import { Form } from '@/components/ui/form';

export default function DatePickerValidation() {
  const now = today(getLocalTimeZone());

  return (
    <I18nProvider locale="pt-BR">
      <Form className="w-80 gap-4" onSubmit={(e) => e.preventDefault()}>
        <DatePicker label="Data do evento" name="evento" isRequired minValue={now} />
        <DateRangePicker
          label="Período da campanha"
          startName="inicio"
          endName="fim"
          isRequired
          validate={(range) =>
            range && range.end.compare(range.start.add({ days: 90 })) > 0 ? 'A campanha pode durar no máximo 90 dias.' : null
          }
        />
        <Button type="submit" className="self-start">
          Criar campanha
        </Button>
      </Form>
    </I18nProvider>
  );
}