DateTimePicker

import type { DateTimePickerOption } from 'heroui-native-pro';
import { useState } from 'react';

const [selected, setSelected] = useState<DateTimePickerOption | undefined>({
  value: '2026-06-01T14:30:00',
  label: 'Jun 1, 2026, 2:30 PM',
});
const [isOpen, setIsOpen] = useState(false);

<DateTimePicker
  value={selected}
  onValueChange={setSelected}
  isOpen={isOpen}
  onOpenChange={setIsOpen}
>
  <DateTimePicker.Select>
    <DateTimePicker.Trigger>
      <DateTimePicker.Value />
      <DateTimePicker.TriggerIndicator />
    </DateTimePicker.Trigger>
    <DateTimePicker.Portal>
      <DateTimePicker.Overlay />
      <DateTimePicker.Content presentation="popover" width="trigger">
        <DateTimePicker.Wheel />
      </DateTimePicker.Content>
    </DateTimePicker.Portal>
  </DateTimePicker.Select>
</DateTimePicker>;

import type { CalendarDateTime } from '@internationalized/date';
import { Description, FieldError, Label } from 'heroui-native';
import { DateTimePicker } from 'heroui-native-pro';
import { View } from 'react-native';

function formatCompactDateTime(value: CalendarDateTime): string {
  const hour12 = value.hour % 12 === 0 ? 12 : value.hour % 12;
  const minute = String(value.minute).padStart(2, '0');
  const marker = value.hour < 12 ? 'a.m.' : 'p.m.';
  return `${value.month}/${value.day} · ${hour12}:${minute} ${marker}`;
}

export default function DateTimePickerExample() {
  return (
    <View className="flex-1 justify-center px-5 gap-12">
      <DateTimePicker formatDateTime={formatCompactDateTime}>
        <Label>Reminder</Label>
        <DateTimePicker.Select>
          <DateTimePicker.Trigger>
            <DateTimePicker.Value placeholder="Pick a reminder date & time" />
            <DateTimePicker.TriggerIndicator />
          </DateTimePicker.Trigger>
          <DateTimePicker.Portal>
            <DateTimePicker.Overlay />
            <DateTimePicker.Content
              presentation="popover"
              width="trigger"
              className="items-center justify-center"
            >
              <DateTimePicker.Wheel />
            </DateTimePicker.Content>
          </DateTimePicker.Portal>
        </DateTimePicker.Select>
        <Description>Required to schedule the notification.</Description>
      </DateTimePicker>

      <DateTimePicker isInvalid hourFormat={24} minuteInterval={5}>
        <Label>Cutoff</Label>
        <DateTimePicker.Select>
          <DateTimePicker.Trigger>
            <DateTimePicker.Value />
            <DateTimePicker.TriggerIndicator />
          </DateTimePicker.Trigger>
          <DateTimePicker.Portal>
            <DateTimePicker.Overlay />
            <DateTimePicker.Content
              presentation="popover"
              width="trigger"
              className="items-center justify-center"
            >
              <DateTimePicker.Wheel />
            </DateTimePicker.Content>
          </DateTimePicker.Portal>
        </DateTimePicker.Select>
        <Description hideOnInvalid>Must be during business hours.</Description>
        <FieldError>Please select a valid cutoff date and time.</FieldError>
      </DateTimePicker>
    </View>
  );
}