Hiển thị Date & Time Picker trong React Native

React Native core không có Date/Time picker. Cách tiêu chuẩn hiện nay là dùng @react-native-community/datetimepicker (maintained by community, cross-platform).

Cài đặt

npm install @react-native-community/datetimepicker

npx pod-install (iOS). Android: rebuild nếu dùng bare workflow.

Import

import DateTimePicker from '@react-native-community/datetimepicker';

Cú pháp cơ bản

<DateTimePicker
  testID="dateTimePicker"
  value={date}
  mode="date"              // 'date' | 'time' | 'datetime' (iOS only)
  is24Hour={true}
  display="default"        // Android: 'default' | 'spinner' | 'calendar' | 'clock'
                           // iOS: 'default' | 'spinner' | 'compact' | 'inline'
  onChange={onChangeFunc}
/>

Props quan trọng

Ví dụ 1: Date Picker (Chọn ngày)

import React, { useState } from 'react';
import { View, Button, SafeAreaView, StyleSheet, Text } from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

export default function App() {
  const [date, setDate] = useState(new Date());
  const [show, setShow] = useState(false);
  const [mode, setMode] = useState('date');

  const onChange = (event, selectedDate) => {
    const currentDate = selectedDate || date;
    setDate(currentDate);
    setShow(false); // Tự đóng sau khi chọn (tùy chọn)
  };

  const showDatePicker = () => {
    setMode('date');
    setShow(true);
  };

  return (
    
      
        Ngày sinh:
        {date.toLocaleDateString('vi-VN')}
      
      

      {show && (
        
      )}
    
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 20 },
  row: { flexDirection: 'row', alignItems: 'center', marginBottom: 20 },
  label: { fontSize: 18, marginRight: 10 },
  value: { fontSize: 18, fontWeight: 'bold' },
});

Ví dụ 2: Time Picker (Chọn giờ)

const [time, setTime] = useState(new Date());
const [showTime, setShowTime] = useState(false);

const showTimePicker = () => {
  setMode('time');
  setShowTime(true);
};

// Trong render:

{showTime && (
   { setTime(d || time); setShowTime(false); }}
  />
)}
// Hiển thị: {time.toLocaleTimeString('vi-VN', { hour: '2-digit', minute: '2-digit' })}

Ví dụ 3: DateTime Picker (iOS only - mode="datetime")

{Platform.OS === 'ios' && showDateTime && (
   { setDateTime(d || dateTime); setShowDateTime(false); }}
  />
)}

Tùy chỉnh UI (Custom Styling)

Component này render native UI (iOS: UIDatePicker, Android: Material Date/Time Picker). **Không thể style trực tiếp** qua props style.

Muốn UI tùy chỉnh hoàn toàn: dùng thư viện JavaScript-based như:

• react-native-date-picker (customizable, cross-platform)
• react-native-calendars (full calendar)
• @react-native-community/datetimepicker với display="spinner" (Android) để gần custom hơn.

Lưu ý quan trọng

• Luôn cleanup state show trong onChange (khi chọn xong hoặc huỷ).
• Android: display="calendar" cho date, display="clock" cho time (UI đẹp hơn default).
• iOS 14+: display="compact" hoặc "inline" cho UI hiện đại.
• Test trên cả 2 platform vì UI/UX khác biệt lớn.