DateTimePicker

Date and time picker modal with calendar and time selection.

Basic Usage

import { DateTimePicker } from '@multinaire/expo-ui';

<DateTimePicker
  mode="date"
  value={selectedDate}
  onChange={(date) => setSelectedDate(date)}
/>

Props

Prop	Type	Default	Description
mode	'date' | 'time'	—	Whether to pick a date or a time
value	Date	—	Currently selected date/time value
minimumDate	Date	—	Earliest selectable date
maximumDate	Date	—	Latest selectable date
onChange	(date: Date) => void	—	Callback invoked with the newly selected date
confirmTitle	string	'Confirm'	Label for the confirm button

Examples

Date Picker

<DateTimePicker
  mode="date"
  value={birthDate}
  maximumDate={new Date()}
  onChange={setBirthDate}
/>

Time Picker

<DateTimePicker
  mode="time"
  value={appointmentTime}
  onChange={setAppointmentTime}
/>

Future Dates Only

<DateTimePicker
  mode="date"
  value={eventDate}
  minimumDate={new Date()}
  onChange={setEventDate}
/>

Date Range Constraint

<DateTimePicker
  mode="date"
  value={selectedDate}
  minimumDate={startOfMonth}
  maximumDate={endOfMonth}
  onChange={setSelectedDate}
/>

With PickerButton

const [date, setDate] = useState<Date>();
const [showPicker, setShowPicker] = useState(false);

<>
  <PickerButton
    title="Date"
    placeholder="Select date"
    value={date ? format(date, 'MMM d, yyyy') : undefined}
    onPress={() => setShowPicker(true)}
  />

  {showPicker && (
    <DateTimePicker
      mode="date"
      value={date || new Date()}
      onChange={(newDate) => {
        setDate(newDate);
        setShowPicker(false);
      }}
    />
  )}
</>

Appointment Booking

<Container gap={16}>
  <PickerButton
    title="Date"
    placeholder="Select date"
    value={formatDate(appointmentDate)}
    onPress={() => setDatePickerVisible(true)}
  />

  <PickerButton
    title="Time"
    placeholder="Select time"
    value={formatTime(appointmentTime)}
    onPress={() => setTimePickerVisible(true)}
  />
</Container>

{datePickerVisible && (
  <DateTimePicker
    mode="date"
    value={appointmentDate}
    minimumDate={new Date()}
    onChange={(date) => {
      setAppointmentDate(date);
      setDatePickerVisible(false);
    }}
  />
)}

{timePickerVisible && (
  <DateTimePicker
    mode="time"
    value={appointmentTime}
    onChange={(time) => {
      setAppointmentTime(time);
      setTimePickerVisible(false);
    }}
  />
)}