CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentmomentjs
xslibx
xslibx

Reputation: 4349

Show an element if date is before or after another date using Vue js

I'm using vue to dynamically show elements (called boxes) on the page, but I need to display an element based on if it's start date is before or after today+1 week.

So if the box.start_date is before one week from today, then show it, else hide it.

I'm not sure how I can do this in vue

ie.

<div class="box" v-if="box.start_date < *** 1 week from now date here?? ***"> ...  </div>

I tried using moment.js but it give me an error saying moment is not defined in vue

With laravel and blade I would just do this like this...

@if($box->start_date > now()->addWeek(1))

How can I make this work with vue?

Upvotes: 1

Views: 2156

Answers (2)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Try to use a computed property to return that value :

computed:{
   beforeWeek(){
   return (new Date().getTime())-(new Date(this.box.start_date).getTime())> (7*24*60*60*1000)
   }
}

template :

<div class="box" v-if="beforeWeek"> ...  </div>

or you could a method :

methods:{
beforeWeek(start_date){
   return (new Date().getTime())-(new Date(start_date).getTime())> (7*24*60*60*1000)
   }
}

template :

<div class="box" v-if="beforeWeek(box.start_date)"> .... </div>

**Note : **

72460601000 is the number of milliseconds in one week

Upvotes: 4

xslibx
xslibx

Reputation: 4349

Figured out a solution that works for me using a method

<div class="box" v-if="skippableDate(box.start_date)"> .... </div>

And in my js

methods: {
        skippableDate(date){
            var now = new Date();
            var skippableDate = now.setDate(now.getDate() + (4+(7-now.getDay())) % 7) // this is getting next thursday (update 4 to the number of the day of the week you want)
            var parseDate = Date.parse(date);

            if(parseDate > skippableDate){
                return true
            }else{
                return false
            }
        },
},

Upvotes: 1

Related Questions