110 lines
4.8 KiB
TypeScript
110 lines
4.8 KiB
TypeScript
import { View, Text, TouchableOpacity, Modal, Platform } from 'react-native';
|
|
import { useState } from 'react';
|
|
import { Calendar } from 'lucide-react-native';
|
|
|
|
interface Props {
|
|
label?: string;
|
|
value: number | null;
|
|
onChange: (timestamp: number) => void;
|
|
}
|
|
|
|
export function DatePicker({ label, value, onChange }: Props) {
|
|
const [show, setShow] = useState(false);
|
|
|
|
// Build a simple date selector (year/month/day dropdowns)
|
|
const selected = value ? new Date(value * 1000) : new Date();
|
|
const today = new Date();
|
|
|
|
const [year, setYear] = useState(selected.getFullYear());
|
|
const [month, setMonth] = useState(selected.getMonth());
|
|
const [day, setDay] = useState(selected.getDate());
|
|
|
|
const years = Array.from({ length: 3 }, (_, i) => today.getFullYear() - 1 + i);
|
|
const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
|
|
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
|
const days = Array.from({ length: daysInMonth }, (_, i) => i + 1);
|
|
|
|
function handleConfirm() {
|
|
const d = new Date(year, month, day, 12, 0, 0);
|
|
onChange(Math.floor(d.getTime() / 1000));
|
|
setShow(false);
|
|
}
|
|
|
|
const displayDate = value
|
|
? new Date(value * 1000).toLocaleDateString('en-PH', { year: 'numeric', month: 'short', day: 'numeric' })
|
|
: 'Select date';
|
|
|
|
return (
|
|
<View className="mb-4">
|
|
{label && <Text className="text-charcoal font-medium mb-1">{label}</Text>}
|
|
<TouchableOpacity
|
|
onPress={() => setShow(true)}
|
|
className="flex-row items-center border border-gray-200 rounded-xl px-4 py-3 bg-white"
|
|
accessibilityRole="button"
|
|
accessibilityLabel={label ? `${label}: ${displayDate}` : displayDate}
|
|
accessibilityHint="Opens date picker"
|
|
style={{ minHeight: 48 }}
|
|
>
|
|
<Calendar size={16} color="#1A6B72" />
|
|
<Text className={`ml-2 flex-1 ${value ? 'text-charcoal' : 'text-gray-400'}`}>{displayDate}</Text>
|
|
</TouchableOpacity>
|
|
|
|
<Modal visible={show} transparent animationType="fade">
|
|
<TouchableOpacity className="flex-1 bg-black/50 justify-end" onPress={() => setShow(false)}>
|
|
<View className="bg-white rounded-t-3xl p-6">
|
|
<Text className="text-charcoal font-semibold text-lg mb-4 text-center">Select Date</Text>
|
|
|
|
<View className="flex-row justify-center gap-4 mb-6">
|
|
{/* Month */}
|
|
<View className="flex-1">
|
|
<Text className="text-gray-500 text-xs text-center mb-2">Month</Text>
|
|
<View className="border border-gray-200 rounded-xl overflow-hidden">
|
|
{months.map((m, i) => (
|
|
<TouchableOpacity key={m} onPress={() => setMonth(i)} className={`py-2 px-3 ${month === i ? 'bg-primary' : ''}`}>
|
|
<Text className={`text-center text-sm ${month === i ? 'text-white font-semibold' : 'text-charcoal'}`}>{m}</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
</View>
|
|
|
|
{/* Day */}
|
|
<View style={{ width: 60 }}>
|
|
<Text className="text-gray-500 text-xs text-center mb-2">Day</Text>
|
|
<View className="border border-gray-200 rounded-xl overflow-hidden">
|
|
{days.filter((_, i) => i < 10 || Math.abs(i - (day - 1)) < 3).map((d) => (
|
|
<TouchableOpacity key={d} onPress={() => setDay(d)} className={`py-2 ${day === d ? 'bg-primary' : ''}`}>
|
|
<Text className={`text-center text-sm ${day === d ? 'text-white font-semibold' : 'text-charcoal'}`}>{d}</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
</View>
|
|
|
|
{/* Year */}
|
|
<View style={{ width: 70 }}>
|
|
<Text className="text-gray-500 text-xs text-center mb-2">Year</Text>
|
|
<View className="border border-gray-200 rounded-xl overflow-hidden">
|
|
{years.map((y) => (
|
|
<TouchableOpacity key={y} onPress={() => setYear(y)} className={`py-3 ${year === y ? 'bg-primary' : ''}`}>
|
|
<Text className={`text-center text-sm ${year === y ? 'text-white font-semibold' : 'text-charcoal'}`}>{y}</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
<TouchableOpacity
|
|
onPress={handleConfirm}
|
|
className="bg-primary rounded-xl py-4"
|
|
accessibilityRole="button"
|
|
accessibilityLabel="Confirm date selection"
|
|
style={{ minHeight: 52 }}
|
|
>
|
|
<Text className="text-white text-center font-semibold text-base">Confirm</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</Modal>
|
|
</View>
|
|
);
|
|
}
|