Display the item for which the date is more recent than today's date

Is there a way to display only upcoming 'events' on my page based on their event_date?

<% for (let event of events){%>
    <div class="card mb-3">
        <div class="row">
            <div class="col-md-8">
                <div class="card-body">
                    <h5 class="card-title"><%= event.event_name %> </h5>
                    <p class="text">Artist: <%= event.artist.username %></p>
                    <p class="text"><%= event.location %> </p>
                    <p class="text">
                        <small class="text-muted"><%= event.description %> </small>
                    </p>
                    <a class="btn btn-primary" href="/events/<%= event.id %>">View Event</a>
                </div>
            </div>
        </div>
    </div>
<% }%>

I currently have an index page that works well, but I would like to modify it to only show future-dated events. Is there a way to achieve this without using SQL?

Answer №1

To compare dates in JavaScript, utilize the built-in Date object and compare them using Date.getTime(). You can obtain the current date by creating a new instance of Date without any arguments:

let date1_timestamp = 1231069762975;
let date1 = new Date(date1_timestamp /* timestamp */);
let date2 = new Date(); // current date

console.log(date1.getTime() < date2.getTime());

// or, if you already have the timestamp
console.log(date1_timestamp < date2.getTime());

It's worth noting that when working with UNIX timestamps, remember that the timestamp used by Date is in milliseconds, unlike the UNIX timestamp which is in seconds.

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

"Return to the top" feature that seamlessly integrates with jQuery's pop-up functionality

Currently, I am facing an issue with a jQuery selectmenu list that opens as a popup due to its length. My goal is to add a "back to top" button at the end of the list. While researching online, I came across this tutorial which seems promising, but unfor ...

What would be the counterpart of setLocale in Yup for the zod library?

How can I set default custom error messages for Zod validation? If I want to use i18n for error messages in Yup, I would do the following: import { t } from "i18next"; import * as yup from "yup"; import "./i18next"; yup.setL ...

In TypeScript, a mapped type is not allowed to define properties or methods

My challenge involves defining an interface with keys that match a specific enum key type. However, when I attempt to declare this type, I encounter the following error message: A mapped type may not declare properties or methods. Below is the code snip ...

Inquiry into AngularJS data binding

Just dipping my toes into the world of Angular today. Found a tutorial at Angular JS in 30 mins This little project involves setting up basic databinding in Angular. The code features an input box that updates with whatever is typed next to it. As someone ...

Issues arise when JQuery functions fail to execute

This unique program showcases a series of error messages that are designed to appear under specific conditions. These conditions are identified through PHP code, following which the essential JQuery script is echoed via PHP to display the messages. Initia ...

Ways to implement functional component in ReactJs

I am currently working with Reactjs and utilizing the Nextjs framework. In my project, I am attempting to retrieve data from a database using Nextjs. However, I am encountering an error that states "TypeError: Cannot read property 'id' of undefin ...

The beforeEach hook in Mocha.js does not support the bail(false) functionality

Whenever I attempt to initiate my mocha test with the instruction bail(false), I am looking to ensure that the tests do not halt even if an error is encountered in a beforeEach hook. Despite setting this configuration, it seems like it's not working ...

Which database platform is the best fit for my needs: MongoDB, Cassandra, Redis, or CouchDB?

We are currently working on a large-scale project and are seeking advice on choosing the best DB backend. Our system consists of 1100 electronic devices that send signals to a central server, which then stores the signal information (each signal is approx ...

Is the input in the array? How to find out?

I am currently facing an issue with a script that I have created to count array elements matching a user input. Strangely, all if statements in the script seem to be returning false. I have verified that both the array element and the input value are stri ...

Calculate the sum of the elements within an array that possess a distinct attribute

I need to calculate the sum of certain elements in an array. For example, let's consider this array: var sampleArray = [ {"id": 1, "value": 50, "active": true}, {"id": 2, "value": 70, "active": false}, ...

Can Node.js Utilize AJAX, and if So, How?

Coming from a background in browser-based JavaScript, I am looking to dive into learning about node.js. From my current understanding, node.js utilizes the V8 engine as its foundation and offers server-side JavaScript capabilities along with pre-installed ...

Overflow - conceal the scrollbar and prevent scrolling without cutting off the element

Whenever I implement the code snippet below: body { overflow: hidden; } The overflowing element gets clipped. However, when I try this code instead: body { overflow: auto; } The element is no longer clipped, but now a scrollbar appears where it ...

I want to display events from my database table on their corresponding dates using JavaScript and jQuery. How can I achieve this?

Using the FullCalendar plugin, I attempted to achieve a specific functionality, but unfortunately fell short of my goal. Below is the snippet of my scripting code: $('#calendar').fullCalendar({ //theme: true, header: { ...

Investigate the presence of a vertical scrollbar using JQuery or JavaScript

Within an HTML report, I have applied the style "overflow:auto" to allow for dynamic data filling. I am now facing the challenge of detecting whether a vertical scrollbar exists within the report. After scouring various forums for solutions, I came across ...

Ways to manually trigger a reevaluation of Vuelidate validation

Is there a way to trigger Vuelidate to re-check a validation? For example, I have a form field where users can input the name of a remote directory. There is a Vuelidate validation in place that communicates with the server to verify if the directory exis ...

Access view name in controller using Ui-Router

Utilizing the ui-router in AngularJS allows for the implementation of multiple views within the same page/state. While each view consists of a template, controller, and more, there appears to be no straightforward method of assigning a "resolve" function ...

Increasing the size of a background image as you scroll

Is there a way to adjust the background image of a div so that it scales according to the amount the page is scrolled? The current implementation works fine on desktop screens, but on mobile screens, the height of the background image reduces and the image ...

What techniques can be used to maintain the value of 'this' when utilizing async.apply?

Employing async.parallel to simultaneously run 2 functions, initiated from a static function within a mongoose model. In this code snippet (where the model contains a static function named verifyParent), I utilize this to access the model and its functions ...

The use of JSON.parse does not support parsing URL links

As a junior developer specializing in Javascript and Google Apps Script, I decided to enhance the functionality of my Google Sheets by tracking the last modification time of URLs stored in them. Although I attempted to create a script for this task, it see ...

Adjusting the visibility of a div as you scroll

I'm trying to achieve a fade-in and fade-out effect on div elements when scrolling over them by adjusting their opacity. However, I'm facing difficulties in getting it to work properly. The issue lies in the fact that my div elements are positio ...