ReactJS: Firebase Sort date as string

Question

I have the DateFrom field in firebase being stored as a string "dd/mm/YY" (ie 20/05/2022)

When I try to sort this via:

useEffect(() => {
    const unsubscribe = firebase
      .firestore() //access firestore
      .collection("trips")
      .where("User", "==", user1)
      .orderBy("DateFrom", "asc")
      .onSnapshot(snapshot => {
        const listItemsTrips = snapshot.docs.map(doc => ({
          id: doc.id,
          ...doc.data()
        }));
        setItems(listItemsTrips);
      });
    return () => unsubscribe();
  }, []);
  return items;

it returns for the most part the correct results, but anything assigned to say 21/05/2023 will still appear after the 20/05/2022 date. How do I sort this string field by date? (through firebase console, doing a sort on the DateFrom field also shows in this order)

It looks to just be sorting by day & month and ignoring the year value?

I think the problem is with the string datatype of the field. Try to store it as a date instead of string, it would work as expected. — Tirth Trivedi
– Tirth Trivedi, Commented May 23, 2022 at 11:21

Uéslei Suptitz · Accepted Answer · 2022-05-23 13:30:25Z

1

You need to save the date in firebase as timestamp. Example:

yourRef
  .collection('you_colletcyion')
  .add({DateFrom: firebase.Timestamp.now()})

So

const unsubscribe = firebase
  .firestore() //access firestore
  .collection("trips")
  .where("User", "==", user1)
  .orderBy("DateFrom", "asc")

Then you can show the date by formatting it. Example with moment.js:

moment(user.DateFrom).locale('pt-br').format('LLL')

edited May 23, 2022 at 13:30

answered May 23, 2022 at 11:23

Uéslei Suptitz

4203 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Frank van Puffelen Over a year ago

Even better would be to use Firestore's native Timestamp type: DateFrom: Timestamp.now()

Paul VI Over a year ago

I ended up using: DateFrom: firebase.firestore.Timestamp.fromDate(new Date(datefrom)) ... I show these items within a map using item.DateFrom ... but doing so returns the error "Uncaught Error: Objects are not valid as a React child (found: object with keys {seconds, nanoseconds}). If you meant to render a collection of children, use an array instead." ... I did try DateFrom: item.DateFrom.toDate() ... this did not work either

Uéslei Suptitz Over a year ago

Try with new Date().getTime() first. After it works, then change the way to do it for the correct way, using the firebase Timestamp

Collectives™ on Stack Overflow

ReactJS: Firebase Sort date as string

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related