DateTimePicker

import { useState } from 'react';
import { Host, DateTimePicker } from '@expo/ui/jetpack-compose';

export default function DatePickerExample() {
  const [selectedDate, setSelectedDate] = useState(new Date());

  return (
    <Host
      matchContents={{ vertical: true }}
      style={{ width: '100%' }}>
      <DateTimePicker
        onDateSelected={date => {
          setSelectedDate(date);
        }}
        displayedComponents="date"
        initialDate={selectedDate.toISOString()}
        variant="picker"
      />
    </Host>
  );
}

import { useState } from 'react';
import { Host, DateTimePicker } from '@expo/ui/jetpack-compose';

export default function TimePickerExample() {
  const [selectedDate, setSelectedDate] = useState(new Date());

  return (
    <Host
      matchContents={{ vertical: true }}
      style={{ width: '100%' }}>
      <DateTimePicker
        onDateSelected={date => {
          setSelectedDate(date);
        }}
        displayedComponents="hourAndMinute"
        initialDate={selectedDate.toISOString()}
        variant="picker"
      />
    </Host>
  );
}

import { useState } from 'react';
import { Host, DateTimePicker } from '@expo/ui/jetpack-compose';

export default function InputVariantExample() {
  const [selectedDate, setSelectedDate] = useState(new Date());

  return (
    <Host
      matchContents={{ vertical: true }}
      style={{ width: '100%' }}>
      <DateTimePicker
        onDateSelected={date => {
          setSelectedDate(date);
        }}
        displayedComponents="date"
        initialDate={selectedDate.toISOString()}
        variant="input"
      />
    </Host>
  );
}

import { useState } from 'react';
import {
  DateRangePicker,
  type DateRangeSelection,
  Host,
} from '@expo/ui/jetpack-compose';

export default function DateRangePickerAndroidExample() {
  const [range, setRange] = useState<DateRangeSelection>({
    start: new Date(),
    end: new Date(Date.now() + 5 * 24 * 60 * 60 * 1000),
  });

  return (
    <Host style={{ flex: 1 }}>
      <DateRangePicker
        initialStartDate={range.start?.toISOString()}
        initialEndDate={range.end?.toISOString()}
        onDateRangeSelected={setRange}
      />
    </Host>
  );
}

import { useState } from 'react';
import { Button } from 'react-native';
import {
  DateRangePickerDialog,
  type DateRangeSelection,
  Host,
} from '@expo/ui/jetpack-compose';

export default function DateRangePickerDialogExample() {
  const [visible, setVisible] = useState(false);
  const [range, setRange] = useState<DateRangeSelection>({
    start: null,
    end: null,
  });

  return (
    <>
      <Button
        title="Select dates"
        onPress={() => setVisible(true)}
      />
      {visible && (
        <Host>
          <DateRangePickerDialog
            initialStartDate={range.start?.toISOString()}
            initialEndDate={range.end?.toISOString()}
            onDateRangeSelected={selectedRange => {
              setRange(selectedRange);
              setVisible(false);
            }}
            onDismissRequest={() => setVisible(false)}
          />
        </Host>
      )}
    </>
  );
}