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:

Format	Result Example	Description
MM/dd/yyyy	01/15/2023	Standard US date format
dd/MM/yyyy	15/01/2023	Standard European date format
yyyy-MM-dd	2023-01-15	ISO date format
MMMM d, yyyy	January 15, 2023	Long date format
MMM d, yyyy	Jan 15, 2023	Medium date format
E, MMM d	Sun, Jan 15	Day of week and abbreviated date
h:mm a	3:30 PM	12-hour time format
HH:mm	15:30	24-hour time format

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

Getting Started