يوجد لدى مشكلة فى كتابة التاريخ بصيغة صحيحة

تستطيع استخدام طريقة onChange على حقل إدخال التاريخ، حيث ستؤدي تلك الطريقة إلى استدعاء الدالة التي تم تعيينها لها كلما قام المستخدم بتغيير قيمة الحقل.

وفي تلك الدالة، استخدم طريقة Date.now() للحصول على التاريخ الحالي وضبط قيمة حقل الإدخال على ذلك التاريخ.

مثال:

import React, { useState } from "react";
import { StyleSheet, Text, View, TextInput } from "react-native";


const App = () => {
  const [date, setDate] = useState(new Date());


  const handleChange = (value) => {
    setDate(new Date());
  };


  return (
    <View style={styles.container}>
      <TextInput
        onChange={handleChange}
        value={date}
        placeholder="Enter date"
        style={styles.input}
      />
      <Text>{date}</Text>
    </View>
  );
};


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  input: {
    width: 200,
    height: 40,
    borderColor: "black",
    borderWidth: 1,
    borderRadius: 5,
  },
});


export default App;

وهناك طريقة أخرى لتجديد التاريخ في كل مرة يقوم فيها المستخدم بإدخال بيانات، وذلك من خلال استخدام طريقة useEffect() لتشغيل الكود عند تغيير قيمة حقل الإدخال.

مثال:

import React, { useState, useEffect } from "react";
import { StyleSheet, Text, View, TextInput } from "react-native";


const App = () => {
  const [date, setDate] = useState(new Date());


  useEffect(() => {
    setDate(new Date());
  }, [date]);


  return (
    <View style={styles.container}>
      <TextInput
        value={date}
        placeholder="Enter date"
        style={styles.input}
      />
      <Text>{date}</Text>
    </View>
  );
};


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  input: {
    width: 200,
    height: 40,
    borderColor: "black",
    borderWidth: 1,
    borderRadius: 5,
  },
});


export default App;

يمكنك استخدام useState لإنشاء متغير حالة يحتوي على التاريخ الحالي. ثم، قم بتحديث هذا المتغير في كل مرة يقوم المستخدم بإدخال بيانات. على سبيل المثال:

import React, { useState } from "react";
import { StyleSheet, Text, TextInput } from "react-native";

const App = () => {
  const [date, setDate] = useState(new Date());

  const handleChange = (event) => {
    const newDate = new Date(event.target.value);
    setDate(newDate);
  };

  return (
    <View>
      <TextInput
        onChange={handleChange}
        value={date.toLocaleDateString()}
      />
    </View>
  );
};
export default App;

في هذا المثال، يتم إنشاء متغير حالة يسمى date. هذا المتغير هو نوع Date ويحتوي على التاريخ الحالي.

ثم، يتم استخدام useState لإنشاء متغير حالة يسمى setDate. هذا المتغير هو نوع Function ويستخدم لتحديث قيمة متغير الحالة date.

في دالة handleChange()، يتم إنشاء تاريخ جديد بناءً على قيمة حقل الإدخال. ثم، يتم تحديث متغير الحالة date باستخدام الدالة setDate().