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.
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.
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 minDate
set to the selected start date to prevent selecting an end date before the start date.
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.
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.