كيف اعمل input الخاص بادخال التاريخ في ReactNative

1. فيما يخص input الخاص بالتاريخ 

أنصحك بتحميل الحزمة date-picker من خلال مدير الحزم npm 

npm install react-native-date-picker

مثال عملي على توضيف الحزمة 

import React, { useState } from 'react'
import { Button } from 'react-native'
import DatePicker from 'react-native-date-picker'

export default () => {
  const [date, setDate] = useState(new Date())
  const [open, setOpen] = useState(false)

  return (
    <>
      <Button title="Open" onPress={() => setOpen(true)} />
      <DatePicker // مكون التاريخ 
        modal
        open={open}
        date={date}
        onConfirm={(date) => {
          setOpen(false)
          setDate(date)
        }}
        onCancel={() => {
          setOpen(false)
        }}
      />
    </>
  )
}

 2. حفظ التاريخ في الذاكرة 

هنا تتم الطريقة باستعمال state management ، الفكرة هي تخزين القيمة على شكل key - value في الذاكرة المحلية 

ثم بعد ذلك يتم جلب القيمة من خلال المفتاح key 

يمكنك إنشاء حقل إختيار التأريخ الخاص بك بسهولة من خلال إستغلال المميزات التي يتيحها لك إطار العمل React في التحكم والتلاعب بحالة البيانات من خلال تفاعل المستخدم مع الواجهة الأمامية ولايختلف الكلام كثيراً عند الحديث عن React Native مع الأخذ بنظر الإعتبار إستعمال الـ widgets بدلاً من عناصر HTML في هذه الحالة. كما يمكنك إستعمال حلولاً جاهزة 3rd party solutions ومثال ذلك المكتبة react-native-community/datetimepicker وهي توفر بالضبط ماتريد في سؤالك, ويمكنك تثبيتها من خلال تنفيذ الأمر التالي

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

بعد التثبيت تستطيع إستيراد الأداة وإستعمالها كمال في المثال التوضيحي التالي

...

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

export const App = () => {
  const [date, setDate] = useState(new Date(1598051730000)); // إنشاء الهوك الخاص بحفظ قيمة التأريخ
	  const onChange = (event, selectedDate) => { // إنشاء دالة الإنصات الى المدخلات من قبل المستخدم
    const currentDate = selectedDate;
    setDate(currentDate);
  };
  const showMode = (currentMode) => { // خيارات ظهور حقل إدخال التأريخ
    DateTimePickerAndroid.open({
      value: date,
      onChange,
      mode: currentMode,
      is24Hour: true,
    });
  };
  
  const showDatepicker = () => { // عرض التأريخ
    showMode('date');
  };
  
  const showTimepicker = () => { // عرض الوقت
    showMode('time');
  };
  
  return (
    <View>
      <Button onPress={showDatepicker} title="أختيار التأريخ" />
      <Button onPress={showTimepicker} title="إختيار الوقت" />
      <Text>المدخلات: {date.toLocaleString()}</Text> {/* عرض ما تم إختياره */}
      
    </View>
  );
};
...