Date Field

'use client';

import { I18nProvider } from 'react-aria-components';
import { DateField } from '@/components/ui/date-field';

export default function DateFieldDemo() {
  return (
    <I18nProvider locale="pt-BR">
      <DateField label="Data de nascimento" description="Formato dd/mm/aaaa." className="w-72" />
    </I18nProvider>
  );
}

'use client';

import { Time } from '@internationalized/date';
import { I18nProvider } from 'react-aria-components';
import { TimeField } from '@/components/ui/date-field';

export default function DateFieldTime() {
  return (
    <I18nProvider locale="pt-BR">
      <TimeField
        label="Horário do atendimento"
        defaultValue={new Time(14, 30)}
        minValue={new Time(8)}
        maxValue={new Time(18)}
        description="Das 08:00 às 18:00."
        className="w-72"
      />
    </I18nProvider>
  );
}

'use client';

import { parseDateTime, parseZonedDateTime } from '@internationalized/date';
import { I18nProvider } from 'react-aria-components';
import { DateField } from '@/components/ui/date-field';

export default function DateFieldGranularity() {
  return (
    <I18nProvider locale="pt-BR">
      <div className="flex w-72 flex-col gap-6">
        {/* CalendarDateTime: data + hora, sem fuso horário */}
        <DateField
          label="Início da manutenção"
          granularity="minute"
          defaultValue={parseDateTime('2026-10-12T22:00')}
        />
        {/* ZonedDateTime: data + hora com fuso (o fuso aparece como segmento) */}
        <DateField
          label="Publicação agendada"
          granularity="minute"
          defaultValue={parseZonedDateTime('2026-10-15T09:00[America/Sao_Paulo]')}
        />
      </div>
    </I18nProvider>
  );
}

'use client';

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

export default function DateFieldValidation() {
  const hoje = today(getLocalTimeZone());

  return (
    <I18nProvider locale="pt-BR">
      <Form className="w-72 gap-4" onSubmit={(e) => e.preventDefault()}>
        {/* Validação nativa: aparece ao enviar o formulário */}
        <DateField
          label="Data de emissão da nota"
          name="emissao"
          isRequired
          maxValue={hoje}
          description="Obrigatória; não pode ser uma data futura."
        />
        {/* Validação personalizada em tempo real */}
        <DateField
          label="Vencimento"
          name="vencimento"
          defaultValue={hoje.subtract({ days: 3 })}
          validationBehavior="aria"
          validate={(value) => (value && value.compare(hoje) < 0 ? 'O vencimento não pode ser no passado.' : null)}
        />
        <Button type="submit" className="self-start">
          Salvar nota
        </Button>
      </Form>
    </I18nProvider>
  );
}