Show an element if date is before or after another date

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 moments.js but it give me an error saying moments 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?

jlrdw

5 years ago

Level 75

You should be able to use a combination of getDate and setDate, or getDate and add 7 days, in js, unless Vue has a library for downloading. I probably wouldn't want a library just for that one thing.

brentxscholl

5 years ago

Level 17

Figured out a solution

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

methods: {
        skippableDate(date){
            var now = new Date();
            var skippableDate = now.setDate(now.getDate() + (4+(7-now.getDay())) % 7) // this is getting next thursday
	    var parseDate = Date.parse(date);

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

Please or to participate in this conversation.