Date Picker Examples

The FormInput component can function as a date or time picker by setting the datePicker.enabled prop to true. This transforms the input into an interactive date picker with various configuration options.

Basic Date Picker

A simple date picker with default styling and formatting. This example shows the most basic setup for a date picker. The selected date is formatted as "Month Day, Year" (e.g., "January 1, 2023") using the format string.

tsx
import { useState } from 'react';
import { View } from 'react-native';
import { FormInput } from '@react-native-utils/forminput';

const BasicDatePickerExample = () => {
  const [date, setDate] = useState<Date | undefined>(undefined);
  
  return (
    <View style={{ padding: 16 }}>
      <FormInput
        text={{
          labelText: "Select Date",
          placeholderText: "Tap to select a date",
        }}
        icon={{
          leftIcon: "calendar",
        }}
        datePicker={{
          enabled: true,
          initialDate: date,
          mode: "single",
          dateFormat: "MMMM d, yyyy", // Example: January 1, 2023
          onDateChange: setDate,
        }}
      />
    </View>
  );
};

Time Picker

A time picker using mode: "single" with withTime: true. By setting the withTime property to true, the date picker also allows time selection. The time is formatted using the 12-hour format with AM/PM indication.

tsx
import { useState } from 'react';
import { View } from 'react-native';
import { FormInput } from '@react-native-utils/forminput';

const TimePickerExample = () => {
  const [time, setTime] = useState<Date | undefined>(undefined);
  
  return (
    <View style={{ padding: 16 }}>
      <FormInput
        text={{
          labelText: "Select Time",
          placeholderText: "Tap to select a time",
        }}
        icon={{
          leftIcon: "clock",
        }}
        datePicker={{
          enabled: true,
          initialDate: time,
          mode: "single",
          withTime: true, // Enable time selection
          dateTimeFormat: "h:mm a", // Example: 3:30 PM
          onDateChange: setTime,
          placeholder: "Select Appointment Time",
        }}
      />
    </View>
  );
};

Date Range Selection

Two date pickers coordinated to select a start and end date. This example shows how to implement a date range selection with two FormInput components. The end date picker has its minDateset to the selected start date to prevent selecting an end date before the start date.

tsx
import { useState } from 'react';
import { View, Text } from 'react-native';
import { FormInput } from '@react-native-utils/forminput';

const DateRangeExample = () => {
  const [dateRange, setDateRange] = useState({ startDate: undefined, endDate: undefined });
  
  const handleDateRangeChange = (range) => {
    setDateRange(range);
  };
  
  return (
    <View style={{ padding: 16 }}>
      <Text style={{ fontSize: 18, fontWeight: 'bold', marginBottom: 16 }}>
        Select Date Range
      </Text>
      
      {/* Date range picker */}
      <FormInput
        text={{
          labelText: "Trip Dates",
          placeholderText: "Select your trip dates",
        }}
        icon={{
          leftIcon: "calendar",
        }}
        datePicker={{
          enabled: true,
          initialRange: dateRange,
          mode: "range",
          dateFormat: "MMM d, yyyy",
          onDateRangeChange: handleDateRangeChange,
          disablePastDates: true,
          placeholder: "Select Trip Dates",
          styles: {
            selectedContainerStyle: { backgroundColor: "#3B82F6" },
            headerTextContainerStyle: { backgroundColor: "#3B82F6" },
            rangeStyle: { backgroundColor: "#E1F5FE" }
          }
        }}
      />
    </View>
  );
};

Custom Styled Date Picker

A date picker with custom colors and formatting. This example demonstrates extensive customization of both the input appearance and the date picker modal. The datePickerStyle prop group allows for customizing colors of various elements in the calendar.

tsx
import { useState } from 'react';
import { View } from 'react-native';
import { FormInput } from '@react-native-utils/forminput';

const CustomStylesDatePickerExample = () => {
  const [eventDate, setEventDate] = useState<Date | undefined>(undefined);
  
  return (
    <View style={{ padding: 16 }}>
      <FormInput
        text={{
          labelText: "Event Date",
          placeholderText: "Select event date",
          labelTextColor: "#6D28D9",
        }}
        icon={{
          leftIcon: "calendar-check",
          leftIconColor: "#6D28D9",
        }}
        style={{
          inputContainerStyle: {
            borderRadius: 10,
            borderWidth: 2,
            borderColor: "#E5E7EB",
            paddingVertical: 12,
          },
          focusedInputContainerStyle: {
            borderColor: "#6D28D9",
          },
        }}
        datePicker={{
          enabled: true,
          initialDate: eventDate,
          mode: "single",
          dateFormat: "EEEE, MMMM d, yyyy", // Example: Monday, January 1, 2023
          onDateChange: setEventDate,
          placeholder: "Select Event Date",
          styles: {
            headerTextContainerStyle: { backgroundColor: "#6D28D9" },
            selectedTextStyle: { color: "#FFFFFF" },
            selectedContainerStyle: { backgroundColor: "#6D28D9" },
            todayTextStyle: { color: "#8B5CF6" },
            dayTextStyle: { color: "#4B5563" },
            confirmButtonStyle: { backgroundColor: "#6D28D9" },
            confirmButtonTextStyle: { color: "#FFFFFF" }
          }
        }}
      />
    </View>
  );
};

Date Formatting

The dateFormat and dateTimeFormat props use date-fns format patterns. Here are some common patterns:

FormatResult ExampleDescription
MM/dd/yyyy01/15/2023Standard US date format
dd/MM/yyyy15/01/2023Standard European date format
yyyy-MM-dd2023-01-15ISO date format
MMMM d, yyyyJanuary 15, 2023Long date format
MMM d, yyyyJan 15, 2023Medium date format
E, MMM dSun, Jan 15Day of week and abbreviated date
h:mm a3:30 PM12-hour time format
HH:mm15:3024-hour time format

For more information on date formatting, see the date-fns format documentation.