DatePicker

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

const AppointmentExample = () => {
  const { locale } = useLocale();
  return (
    <DatePicker
      className="max-w-xs"
      description="Weekdays only."
      firstDayOfWeek="mon"
      isDateUnavailable={(date) => isWeekend(date, locale)}
      label="Appointment date"
      minValue={today(getLocalTimeZone())}
    />
  );
};

<AppointmentExample />

import { getLocalTimeZone, now } from '@internationalized/date';
import { DatePicker } from '@arbol-ai/ui';

<DatePicker
  className="max-w-xs"
  defaultValue={now(getLocalTimeZone())}
  granularity="minute"
  hideTimeZone
  hourCycle={24}
  label="Send the reminder at"
/>

import { getLocalTimeZone, today } from '@internationalized/date';
import { DateRangePicker } from '@arbol-ai/ui';

() => {
  const start = today(getLocalTimeZone());
  return (
    <DateRangePicker
      className="max-w-sm"
      defaultValue={{ start, end: start.add({ weeks: 2 }) }}
      description="The agent calls contacts only between these days."
      label="Campaign dates"
    />
  );
}