React Native-এ ডেটা এবং টাইম পিকার (DateTimePicker) দেখানোর পদ্ধতি

React Native-এ ডেট/টাইম পিকার জন্য কমিউনিটি মেইন্টেইনড @react-native-community/datetimepicker প্যাকেজ ব্যবহার করা হয়।

ইনস্টলেশন

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

নোট: Expo-এ এটি বিল্ট-ইন রয়েছে, আলাদা ইনস্টল লাগে না।

ইম্পোর্ট

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

বেসিক সিনট্যাক্স

<DateTimePicker
  testID="dateTimePicker"
  value={date_value}
  mode={display_mode}
  is24Hour={true}
  display="default"
  onChange={on_change_func}
/>

মূল প্রপস

উদাহরণ ১: ডেট পিকার (Date Picker)

import React, { useState } from 'react';
import { View, Button, 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 [isVisible, setShow] = useState(false);

  const onChange = (event, selectedDate) => {
    const currentDate = selectedDate || myDate;
    setDate(currentDate);
    setShow(false); // পিকার বন্ধ করুন
  };

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

  return (
    
      
        
      
      {isVisible && (
        
      )}
    
  );
}

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

উদাহরণ ২: টাইম পিকার (Time Picker)

শুধু mode='time' এবং বাটন টাইটেল পরিবর্তন করুন:

const [displayMode, setMode] = useState('time');
// ...
const showTimePicker = () => { setMode('time'); setShow(true); };
// ...
...

আউটপুট

• বাটন চাপলে নেটিভ ডেট/টাইম পিকার মডাল/স্পিনার হিসেবে উঠবে।
• সিলেক্ট করলে কলব্যাক ফায়ার হবে এবং স্টেট আপডেট হবে।

বেস্ট প্র্যাকটিস

• পিকার দেখানোর পর setShow(false) কল করে অটোমেটিক বন্ধ করুন।
• iOS-এ display="inline" দিয়ে ইনলাইন ক্যালেন্ডার দেখানো যায়।
• ফর্ম ভ্যালিডেশনের জন্য minimumDate, maximumDate ব্যবহার করুন।