-1

Im trying to see if a date is beyond different intervals, and if so add some stylesheet to them. Im using Vuejs version 3 for this. I have not been able to locate the issue, but the result vary. For example if user.active.created_at is the same date as dayjs(), it does return fill-gray-400 and not fill-green-400. user.active.created_at is the last sign-in date for user.

This is my method:

  methods: {
    active(user){
      var isBetween = require('dayjs/plugin/isBetween')
      dayjs.extend(isBetween)
      
      if(dayjs(user.active.created_at).isBetween(dayjs().subtract(10, 'day'), dayjs(), 'day')){
        return 'fill-green-400'
      }

      if(dayjs(user.active.created_at).isBetween(dayjs().subtract(30, 'day'), dayjs(), 'day')){
        return 'fill-red-400'
      }

      return 'fill-gray-400'
      
    }
  },

And this is my template that im trying to add classes to

<div v-for="user in users">
    <icon name="chart-simple" class="flex-shrink-0 ml-2 w-3 h-3" :class="active(user)" />
</div>

The expected result is if a user has signed-in in the last 10 days, return fill-green-400 and if a user has signed-in in the past 30 days, return fill-red-400.

Adam
  • 1,231
  • 1
  • 13
  • 37

1 Answers1

0

isBetween is excludes start and end date default.

When user.active.created_at is the same date as dayjs() your code will not enter these two if statements

try add parameter 4 []

Parameter 4 is a string with two characters; '[' means inclusive, '(' exclusive

 if(dayjs(user.active.created_at).isBetween(dayjs().subtract(10, 'day'), dayjs(), 'day','[]')){
        return 'fill-green-400'
      }

      if(dayjs(user.active.created_at).isBetween(dayjs().subtract(30, 'day'), dayjs(), 'day', '[]')){
        return 'fill-red-400'
      }

reference : https://day.js.org/docs/en/plugin/is-between

Zhoumin Lu
  • 42
  • 5