Display a component based on whether a date comes before or after a specific date in Vue.js

Using vue to dynamically display elements (referred to as boxes) on the page poses a challenge for me. I need to determine whether to show an element based on whether its start date is before or after today plus one week.

If the box.start_date falls before one week from today, then it should be displayed; otherwise, it should remain hidden.

I am uncertain about how to achieve this in vue.

For example:

<div class="box" v-if="box.start_date < ***the date that is 1 week from now***"> ...  </div>

I attempted to use moment.js but encountered an error stating that moment is not defined in vue.

With Laravel and Blade, I would handle this situation like so...

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

How can I accomplish this in vue?

javascriptvue.jsvuejs2vue-componentmomentjs

Answer №1

Consider implementing a computed property to handle this calculation :

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

Here is how you can use it in your template :

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

Alternatively, you can also create a method for the same purpose :

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

And here's how you would utilize the method in your template :

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

**Please note:**

7*24*60*60*1000 represents the number of milliseconds in one week

Answer №2

Discovered a successful solution by implementing a specific method

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

Additionally, in my JavaScript code

methods: {
        skippableDate(date){
            var now = new Date();
            var skippableDate = now.setDate(now.getDate() + (4+(7-now.getDay())) % 7) // calculating the next Thursday (update 4 to set desired day of the week)
            var parseDate = Date.parse(date);

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Show an empty table/data grid with blank rows using Material UI

I am attempting to showcase a table with empty lines and a predefined height, even when there is no data to display initially. By default, the table appears without any visible lines. My goal is to have these empty lines displayed, ensuring that the table ...

javascriptreactjsdatagridmaterial-ui

Utilize the datepicker function in jQuery version 1.6.3 to select a range of dates

I need help adding a jQuery datepicker to my JSP page for selecting a date range. Below is the current code I am working with. $(function() { $( "#createdAtFrom" ).datepicker({ defaultDate: "+1w", changeMonth: true, ...

javascriptjqueryjspdatedatepicker

Reactivity in Vue 3 with globalProperties

When attempting to migrate a Vue 2 plugin to Vue 3, I encountered an issue in the install function. In Vue 2, I had code that looked like this: install(Vue, options) { const reactiveObj = { // ... }; Vue.prototype.$obj = Vue.observable(reactiveO ...

javascriptvue.jsvuejs3

Node Selenium for Importing Excel Files---I will help you

My current challenge involves using node selenium in Firefox to click a link that triggers the download of an excel file. I want the downloaded file to be saved in a specific directory, but when I click the link, a dialog box pops up giving me the option ...

javascriptnode.jsseleniumselenium-webdriver

What is the process for creating a hover linear wipe transition using CSS/JS?

It's worth noting that I can't simply stack one image on top of the other because I'll be dealing with transparent images as well. preview of linear wipe ...

javascriptcssfrontend

Converting text to JSON using JSONP with jQuery's AJAX functionality

Potential Duplicate Question 1 Possible Duplicate Inquiry 2 I have been searching for a definitive explanation on JSONP across various questions but haven't been able to find one yet. For instance, I am attempting to make a cross domain request us ...

javascriptjqueryajaxjsonjsonp

Setting up a multi-page configuration in Vue CLI 3.0 with HTML5 history mode support

Utilizing vue-cli 3.0 allows for configuring multi page mode using the pages config. https://cli.vuejs.org/config/#pages I am currently attempting to set up the dev server with HTML5 history mode, but have not been successful yet. Has anyone successfull ...

vue.jsvue-cli

Using jQuery to modify the text content within an element

Two li elements exist, each containing an icon and text. The goal is to modify the icon and text of the first element upon button click without affecting the entire anchor tag's content when using .text(). $(document).ready(function(){ $("#change ...

javascriptjqueryhtml

React: Avoid the visible display of conditional rendering component fluctuations

In my current React project, I am developing a page that dynamically displays content based on the user's login status. The state variable "loggedIn" is initially set to null, and within the return statement, there is a ternary operator that determine ...

javascriptreactjs

Enhance Select Dropdown in AngularJS with Grouping and Default Selection

I am facing an issue with a form that includes a SELECT element. I have successfully loaded the possible values in my controller from a function that retrieves data from a database and groups the options by a group name. Although the list of options is lo ...

javascriptangularjsdrop-down-menu

What is the process for using populate with a custom ObjectId that is of type String?

My current setup involves using a firebase project for authentication and saving additional user information in MongoDB. The challenge comes in when assigning the UID of the firebase user to the _id field of the user model in MongoDB. To make this possible ...

javascriptnode.jsmongodbfirebasemongoose

Use an if-else statement in jQuery with selectors to determine if a specific div element has been added to it

What if you have a main div and append one of these sub-divs to it? For example: <div class ="append"> <div id ="one"></div> <div id ="two"></div> </div> Then in jQuery, could you do something like this: if ($(.a ...

javascriptjqueryhtml

grabbing data from different domains using jQuery

I attempted to implement cross-domain AJAX examples, but unfortunately, it did not function as expected. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/ht ...

javascriptjqueryajaxtwitter

Data disappears on the following line

Could someone please help me understand what's going on in these snippets of code and how I can resolve it? I am fetching data in the parent component's mounted function and updating its data. As a result, the child component receives the new ob ...

javascriptvue.js

Having trouble properly displaying information from a JSON array with jQuery

Having a basic array of data in a JSON file is presenting a challenge for a beginner like me when it comes to extracting the data. Here is the array that I have access to: var clients = [ { "clientid": "456489", "client-name": "John Smith", "e ...

javascriptjqueryarraysjson

What is the method for dynamically toggling an HTML property without a value in Vue.js?

My desire is for it to be displayed like this: // normal <div></div> // when necessary, add a `data-locked` attribute without a value to it <div data-locked></div> I attempted <div :data-locked='conditionBoolean'>&l ...

vue.js

React Change Detection: Uncovering Updates

Whenever there is a change in some data, I want to trigger a side-effect. const useSearchResults = () => { const location = useLocation(); const [data, setData] = useState(); useEffect(() => { Api.search(location.query.q).then(data => se ...

javascriptreactjsreact-hooks

Determining signal interdependence

Seeking insight from Angular experts regarding Signals: When you use a computed() signal, dependencies are automatically monitored. However, as per the documentation, this only applies to signals that were previously accessed. If my interpretation is cor ...

javascriptangularangular-signals

Vitek - Uncaught ReferenceError: Document Is Not Defined

Why am I encountering an error when trying to use File in my vitest code, even though I can typically use it anywhere else? How can I fix this issue? This is the content of my vite.config.ts. /// <reference types="vitest" /> import { defin ...

typescriptvue.jsvitevitest

Guide on making a reusable pagination child component in VueJS

As a developer, I am currently utilizing Element-UI to speed up the development process of my applications. One feature I want to implement is pagination as a reusable child component within any parent component in order to decrease the overall app size. ...

javascriptvue.jspaginationelement-ui