วิธีแสดง Date และ Time Picker ใน React Native

เพื่อแสดง Date และ Time picker ต้องติดตั้งแพ็กเกจ:

npm install @react-native-community/datetimepicker --save

ตัวอย่าง: DateTimePicker ใน React Native

การนำเข้า

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

คอมโพเนนต์พื้นฐาน

<DateTimePicker
  testID="dateTimePicker"
  value={myDate}
  mode={displayMode}
  is24Hour={true}
  display="default"
  onChange={onChangeFunc}
/>

คุณสมบัติสำคัญ

ตัวอย่าง Date Picker

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

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

  const changeSelectedDate = (event, selectedDate) => {
    const currentDate = selectedDate || myDate;
    setDate(currentDate);
  };

  const showMode = (currentMode) => {
    setShow(true);
    setMode(currentMode);
  };

  const displayDatepicker = () => {
    showMode('date');
  };

  return (
    
      
        
      
      {isDisplayDate && (
        
      )}
    
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: "center", justifyContent: "center" },
});

ผลลัพธ์ Date Picker

กดปุ่ม Show Date Picker เพื่อดู picker

ตัวอย่าง Time Picker

เปลี่ยน mode เป็น 'time':

const [displayMode, setMode] = useState('time');

const displayTimepicker = () => {
  showMode('time');
};

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

export default function App() {
  const [myDate, setDate] = useState(new Date());
  const [displayMode, setMode] = useState('time');
  const [isDisplayDate, setShow] = useState(false);

  const changeSelectedDate = (event, selectedDate) => {
    const currentDate = selectedDate || myDate;
    setDate(currentDate);
  };

  const showMode = (currentMode) => {
    setShow(true);
    setMode(currentMode);
  };

  const displayTimepicker = () => {
    showMode('time');
  };

  return (
    
      
        
      
      {isDisplayDate && (
        
      )}
    
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: "center", justifyContent: "center" },
});

กดปุ่ม YOUR TIME PICKER เพื่อดู time picker

หมายเหตุ

• บน iOS รองรับ mode 'datetime' และ 'countdown' เพิ่มเติม
• Android ใช้ display mode 'calendar' สำหรับ date และ 'clock' สำหรับ time
• ต้อง link native modules (auto-linking ใน RN 0.60+)