Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Vuetify v-data-table sort on string formatted dates and potential nulls

I have a v-data-table which includes dates that have been formatted with dayjs to "MM/DD/YYYY" however some dates are null since they have not been completed yet. I am trying to add sorting in the header array for this formatted date column by:

        { title: 'Memo Date', key: 'memo_date', align: 'center', visible: true, filtered: [], sort: 
      function(a: string, b: string) {
        if (a == null && b == null) 
        {
          let c = dayjs().format("MM/DD/YYYY")
          console.log(c)

          return 0
        }
        else if (a == null) {
          let c = dayjs().format("MM/DD/YYYY")
          console.log(c)
          return (dayjs(c).diff(dayjs(b)))
        } else if (b == null) 
        {
          let c = dayjs().format("MM/DD/YYY")
          console.log(c)
          return (dayjs(a).diff(dayjs(c)))
        }
        return dayjs(a).diff(dayjs(b))
      }
    },

However, the ordering does not seem to put these null dates as the most recent date to sort ahead of the actually dates. For instance, if the date is null i try to convert it to today so it is ordered as the newest item but this does not seem to work as expected.

UPDATE:
Based on the recent answer I have posted a potential usage for sorting but still the null dates are showing up as earlier dates whereas I want those to be considered the newest dates:

const customDateSort = (a : string, b : string) => {
  const aDate = String((new Date(a)).getTime())
  const bDate = String((new Date(b)).getTime())
  return aDate.localeCompare(bDate)
}
Tags:

2

Answers


  1. 0

    If you want to compare Dates, you can convert them to epoch timestamps aka the time elapsed since January 1, 1970, UTC.

    new Date().getTime()                               // 1717088172916, now's time
new Date("Thu, 2 January 1970 00:00:00").getTime() // 82800000

    The lower the number, the older it is. Simplest way to sort them I think.

    Here is a decent article on the subject.

    Otherwise, Temporal API probably has some functions for that use-case. Or using any kind of date library should have such a feature too, but using a vanilla JS solution is always nice.

    To filter on the array to convert into current time if null, then sort properly each timestamp

    [42, "Thu, 2 January 1970 00:00:00", null, "Thu Jan 10 2023 19:23:55 GMT+0200 (Central European Summer Time)"].map(date => {
  if(!date) { // if null
    return date = new Date().getTime() // set it to the current time
  }
  return new Date(date).getTime() // otherwise, convert the regular Date format into a timestamp
}).sort((a, b) => a - b)
// [42, 82800000, 1673371435000, 1717090069492]
    Login or Signup to reply.
  2. 0

    This may be a problem with how the comparator function works. It seems that you are also trying to sort dates in descending order by default as well which can be a bit confusing to put into code.

    take for example

    (today: dayjs, yesterday: dayjs) => {
  return today.diff(yesterday)
}

    today.diff(yesterday) will return a positive integer, which sorts today after yesterday (yesterday is on top)

    To solve this, I think you should try reversing your .diff() order:

    function(a: string, b: string) {
    let today = dayjs()
    console.log(c)

    if (a == null && b == null) 
    {
      return 0
    }
    else if (a == null) {
      // "a" is null, so we should return
      // a negative value by diffing a past date with a future day
      return (dayjs(b).diff(today))
    } else if (b == null) 
    {
      // the reverse of above, return a positive value
      return (today.diff(dayjs(a)))
    }
    // lastly, reverse this as well
    return dayjs(b).diff(dayjs(a))
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search