Pickers, Date/Time & Native Inputs

npx expo install @react-native-community/datetimepicker @react-native-picker/picker

import { useState } from "react";
import { Platform, Pressable, Text, View } from "react-native";
import DateTimePicker, {
  DateTimePickerEvent,
} from "@react-native-community/datetimepicker";
import { Picker } from "@react-native-picker/picker";
 
export function AppointmentFields() {
  const [date, setDate] = useState(new Date());
  const [showDate, setShowDate] = useState(false);
  const [timezone, setTimezone] = useState("America/New_York");
 
  const onDateChange = (_event: DateTimePickerEvent, selected?: Date) => {
    if (Platform.OS === "android") setShowDate(false);
    if (selected) setDate(selected);
  };
 
  return (
    <View>
      <Pressable
        onPress={() => setShowDate(true)}
        accessibilityRole="button"
        accessibilityLabel="Appointment date"
        accessibilityHint="Opens the date picker"
      >
        <Text>{date.toLocaleDateString()}</Text>
      </Pressable>
 
      {showDate && (
        <DateTimePicker
          value={date}
          mode="date"
          display={Platform.OS === "ios" ? "spinner" : "default"}
          onChange={onDateChange}
        />
      )}
 
      <Picker
        selectedValue={timezone}
        onValueChange={setTimezone}
        accessibilityLabel="Time zone"
      >
        <Picker.Item label="Eastern" value="America/New_York" />
        <Picker.Item label="Pacific" value="America/Los_Angeles" />
      </Picker>
    </View>
  );
}

import { useCallback, useState } from "react";
import {
  Modal,
  Platform,
  Pressable,
  StyleSheet,
  Text,
  View,
} from "react-native";
import DateTimePicker, {
  DateTimePickerEvent,
} from "@react-native-community/datetimepicker";
import { Picker } from "@react-native-picker/picker";
 
type FormState = {
  date: Date;
  time: Date;
  durationMinutes: number;
};
 
const DURATIONS = [15, 30, 45, 60] as const;
 
const formatDate = (d: Date) =>
  new Intl.DateTimeFormat(undefined, {
    weekday: "short",
    month: "short",
    day: "numeric",
    year: "numeric",
  }).format(d);
 
const formatTime = (d: Date) =>
  new Intl.DateTimeFormat(undefined, {
    hour: "numeric",
    minute: "2-digit",
  }).format(d);
 
export function BookingForm({
  onSubmit,
}: {
  onSubmit: (value: FormState) => void;
}) {
  const [form, setForm] = useState<FormState>({
    date: new Date(),
    time: new Date(),
    durationMinutes: 30,
  });
  const [activePicker, setActivePicker] = useState<
    "date" | "time" | null
  >(null);
 
  const closePicker = useCallback(() => setActivePicker(null), []);
 
  const onPickerChange = useCallback(
    (field: "date" | "time") =>
      (_event: DateTimePickerEvent, selected?: Date) => {
        if (Platform.OS === "android") closePicker();
        if (!selected) return;
        setForm((prev) => ({ ...prev, [field]: selected }));
      },
    [closePicker],
  );
 
  const iosPicker = activePicker ? (
    <Modal transparent animationType="slide" onRequestClose={closePicker}>
      <Pressable style={styles.backdrop} onPress={closePicker} />
      <View style={styles.sheet}>
        <View style={styles.sheetHeader}>
          <Pressable onPress={closePicker} accessibilityRole="button">
            <Text style={styles.done}>Done</Text>
          </Pressable>
        </View>
        <DateTimePicker
          value={form[activePicker]}
          mode={activePicker}
          display="spinner"
          onChange={onPickerChange(activePicker)}
        />
      </View>
    </Modal>
  ) : null;
 
  const androidPicker =
    Platform.OS === "android" && activePicker ? (
      <DateTimePicker
        value={form[activePicker]}
        mode={activePicker}
        onChange={onPickerChange(activePicker)}
      />
    ) : null;
 
  return (
    <View style={styles.container}>
      <Text style={styles.label}>Date</Text>
      <Pressable
        style={styles.field}
        onPress={() => setActivePicker("date")}
        accessibilityRole="button"
        accessibilityLabel={`Date, ${formatDate(form.date)}`}
      >
        <Text>{formatDate(form.date)}</Text>
      </Pressable>
 
      <Text style={styles.label}>Time</Text>
      <Pressable
        style={styles.field}
        onPress={() => setActivePicker("time")}
        accessibilityRole="button"
        accessibilityLabel={`Time, ${formatTime(form.time)}`}
      >
        <Text>{formatTime(form.time)}</Text>
      </Pressable>
 
      <Text style={styles.label}>Duration</Text>
      <View style={styles.pickerWrap}>
        <Picker
          selectedValue={form.durationMinutes}
          onValueChange={(durationMinutes) =>
            setForm((prev) => ({ ...prev, durationMinutes }))
          }
          accessibilityLabel="Duration"
        >
          {DURATIONS.map((m) => (
            <Picker.Item key={m} label={`${m} minutes`} value={m} />
          ))}
        </Picker>
      </View>
 
      <Pressable
        style={styles.submit}
        onPress={() => onSubmit(form)}
        accessibilityRole="button"
      >
        <Text style={styles.submitText}>Book</Text>
      </Pressable>
 
      {iosPicker}
      {androidPicker}
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: { padding: 16, gap: 8 },
  label: { fontSize: 14, fontWeight: "600", color: "#374151" },
  field: {
    padding: 14,
    borderWidth: 1,
    borderColor: "#d1d5db",
    borderRadius: 8,
    backgroundColor: "#fff",
  },
  pickerWrap: {
    borderWidth: 1,
    borderColor: "#d1d5db",
    borderRadius: 8,
    overflow: "hidden",
  },
  submit: {
    marginTop: 12,
    padding: 14,
    borderRadius: 8,
    backgroundColor: "#2563eb",
    alignItems: "center",
  },
  submitText: { color: "#fff", fontWeight: "600" },
  backdrop: { flex: 1, backgroundColor: "rgba(0,0,0,0.35)" },
  sheet: {
    backgroundColor: "#fff",
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16,
    paddingBottom: 24,
  },
  sheetHeader: {
    alignItems: "flex-end",
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: "#e5e7eb",
  },
  done: { color: "#2563eb", fontWeight: "600", fontSize: 16 },
});

// Store native Date objects in form state
const [startsAt, setStartsAt] = useState(new Date());
 
// Serialize only at the API boundary
const payload = {
  startsAt: startsAt.toISOString(), // UTC ISO-8601
  dateOnly: startsAt.toISOString().slice(0, 10), // YYYY-MM-DD when time is irrelevant
};
 
// Parse API responses back to Date
const restored = new Date(payload.startsAt);

import type { DateTimePickerEvent } from "@react-native-community/datetimepicker";
 
type PickerField = "date" | "time";
 
function handleChange(
  field: PickerField,
  event: DateTimePickerEvent,
  selected?: Date,
) {
  // event.type: "set" | "dismissed" (Android)
  if (event.type === "dismissed") return;
  if (selected) {
    // narrow field-specific updates
  }
}