Date input not showing up correctly

Issue

For context, I have set up a Firebase database and received some date as input not gonna show full code of the form page because its simple I get some object:

{showDatePicker && (
        <DateTimePicker
          style={{ width: 200 }}
          value={state.date}
          mode="date"
          display="default"
          onChange={handleDateChange}
        />
      )}

My problem is here

import { useState } from "react";
import db from "../database/database";
import { collection, getDocs } from "firebase/firestore";
import { useEffect } from "react";
import { View, Text } from "react-native";
import { StyleSheet } from "react-native";

export function TaskCard({ ri, ci }) {
  const [cards, setCards] = useState([]);
  useEffect(() => {
    async function fetchData() {
      const querySnapshot = await getDocs(collection(db, "tasks"));
      const taskList = querySnapshot.docs.map((doc) => doc.data());
      setCards(taskList);
    }
    fetchData();
  }, []);

  return (
    <View style={styles.container}>
      {cards.map((card) => {
        console.log(card.date);
        const options = { weekday: "long" };
        const new_date = card.date.toLocaleDateString("en-US", options);
        const day = new_date.split(",")[0];

        if (day == "Saturday") {
          day = 1;
        } else if (day == "Monday") {
          day = 2;
        } else if (day == "Tuesday") {
          day = 3;
        } else if (day == "Wednesday") {
          day = 4;
        } else if (day == "Thursday") {
          day = 5;
        } else if (day == "Friday") {
          day = 6;
        } else if (day == "Saturday") {
          day = 7;
        }

        if (card.hour >= 6 && card.hour <= 12) {
          card.hour = card.hour - 5;
        } else if (card.hour >= 1 && card.hour <= 5) {
          card.hour = card.hour + 7;
        }

        return card.hour === ri && day == ci ? (
          <View key={card.id}>
            <Text>{card.title}</Text>
            <Text>{card.description}</Text>
          </View>
        ) : (
          <View key={card.id}></View>
        );
      })}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: 90,
    height: 90,
    backgroundColor: "#fff",
    borderRadius: 10,
    justifyContent: "center",
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  title: {
    fontSize: 20,
    fontWeight: "bold",
    color: "#000",
  },
  description: {
    fontSize: 15,
    color: "#000",
  },
});

you see when I try to call card.date that is supposed to be a Date instance but when doing console.log I get:

Object {
  "nanoseconds": 141000000,
  "seconds": 1700447054,
}

why is that date not working seems like a firebase issue

Solution

It looks like your stored a Timestamp type in Firestore, which actually has more information than a JavaScript Date does. To get a Date from the Timestamp value, call toDate() on it.

So something like:

card.date.toDate().toLocaleDateString("en-US", options)

Also see:

• How do I convert a Firestore date/Timestamp to a JS Date()?
• How to get a JavaScript Date object from the new `firebase.firestore.FieldValue.serverTimestamp()`
• how to change a timestamp date from firebase to a javascript date?

Answered By - Frank van Puffelen