Skip to main content

MultinaireDateTimePicker

Date and time picker modal with calendar and time selection.

Basic Usage​

import { MultinaireDateTimePicker } from '@multinaire/multinaire-design';

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

Props​

PropTypeDefaultDescription
mode'date' | 'time'-Picker mode
valueDate-Currently selected date/time
minimumDateDate-Minimum selectable date
maximumDateDate-Maximum selectable date
onChange(date: Date) => void-Selection handler

Examples​

Date Picker​

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

Time Picker​

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

Future Dates Only​

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

Date Range Constraint​

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

With PickerButton​

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

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

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

Appointment Booking​

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

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

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

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