What is the most efficient way to add or remove Date objects from arrays?

Question

What is the most efficient way to add or remove Date objects from arrays?

Struggling to update a calendar using the Datepicker component with Vue.js, I encountered some issues with adding and deleting items (specifically Date objects)

I have written two javascript functions: one for adding new Dates to an array, and another for removing specific dates from the same array. The problem arises when trying to add a date and then delete it without reloading the website, as the function returns -1 when searching for the index of the date in the array.

addDate: function(event) {
   var fecha = document.getElementById("inputFecha").value;
   var fecha2 = new Date(fecha);
   availableDates.push(fecha2);
},
deleteDate: function(event) {
   var collection = availableDates,
      d = new Date(event.getFullYear(), event.getMonth(), event.getDate()),
      idx;
   idx = collection.map(Number).indexOf(+d);
   if(idx!=-1){
      availableDates.splice(idx,1);
   }
}

Here are some of the initial dates created in the file:

var availableDates = [];
availableDates.push(new Date(2019, 2, 29));
availableDates.push(new Date(2019, 2, 30));
availableDates.push(new Date(2019, 2, 28));

The goal is to enable adding and deleting functionality without needing to refresh the website.

javascript arrays date vue.js

Answer 1

Answer №1

When you use the code new Date(2019, 2, 30), the date created is 2019-03-30T00:00:00 in the timezone set on your device.

It's important to note that if you were to use new Date("30/3/2019"), it would create 2019-03-30T00:00:00Z which refers to UCT/UTC/GMT/Zulu time. This may result in an error if your timezone is not +0.

If inputFecha is an <input type="date">

addDate: function(event) {
    var fecha = document.getElementById("inputFecha").valueAsDate;
    var fecha2 = new Date(fecha.getFullYear(), fecha.getMonth(), fecha.getDate());
   availableDates.push(fecha2);
},

In order to demonstrate that the code works, here is a dummy example since no Minimum Complete Verifiable Example (MCVE) was provided:

const availableDates = [];
let something = {
  addDate: function(event) {
    var fecha = document.getElementById("inputFecha").valueAsDate;
    var fecha2 = new Date(fecha.getFullYear(), fecha.getMonth(), fecha.getDate());
    availableDates.push(fecha2);
    console.log(availableDates);
  },
  deleteDate: function(event) {
    var collection = availableDates,
      d // = new Date(event.getFullYear(), event.getMonth(), event.getDate()),
    
    // dummy code to test
    var fecha = document.getElementById("inputFecha").valueAsDate;
    d = new Date(fecha.getFullYear(), fecha.getMonth(), fecha.getDate());
    // end dummy code
    
    const idx = collection.map(Number).indexOf(+d);
    if (idx != -1) {
      availableDates.splice(idx, 1);
    }
    console.log(availableDates);
  }
}
availableDates.push(new Date(2019, 2, 29));
availableDates.push(new Date(2019, 2, 30));
availableDates.push(new Date(2019, 2, 28));
console.log(availableDates);
document.querySelectorAll('.butt').forEach(btn =>
  btn.addEventListener('click', something[btn.id])
);

<input type="date" id="inputFecha">
<input type="button" class="butt" id="addDate" value="add">
<input type="button" class="butt" id="deleteDate" value="remove">

Answer 2

When you use the code new Date(2019, 2, 30), the date created is 2019-03-30T00:00:00 in the timezone set on your device.

It's important to note that if you were to use new Date("30/3/2019"), it would create 2019-03-30T00:00:00Z which refers to UCT/UTC/GMT/Zulu time. This may result in an error if your timezone is not +0.

If inputFecha is an <input type="date">

addDate: function(event) {
    var fecha = document.getElementById("inputFecha").valueAsDate;
    var fecha2 = new Date(fecha.getFullYear(), fecha.getMonth(), fecha.getDate());
   availableDates.push(fecha2);
},

In order to demonstrate that the code works, here is a dummy example since no Minimum Complete Verifiable Example (MCVE) was provided:

const availableDates = [];
let something = {
  addDate: function(event) {
    var fecha = document.getElementById("inputFecha").valueAsDate;
    var fecha2 = new Date(fecha.getFullYear(), fecha.getMonth(), fecha.getDate());
    availableDates.push(fecha2);
    console.log(availableDates);
  },
  deleteDate: function(event) {
    var collection = availableDates,
      d // = new Date(event.getFullYear(), event.getMonth(), event.getDate()),
    
    // dummy code to test
    var fecha = document.getElementById("inputFecha").valueAsDate;
    d = new Date(fecha.getFullYear(), fecha.getMonth(), fecha.getDate());
    // end dummy code
    
    const idx = collection.map(Number).indexOf(+d);
    if (idx != -1) {
      availableDates.splice(idx, 1);
    }
    console.log(availableDates);
  }
}
availableDates.push(new Date(2019, 2, 29));
availableDates.push(new Date(2019, 2, 30));
availableDates.push(new Date(2019, 2, 28));
console.log(availableDates);
document.querySelectorAll('.butt').forEach(btn =>
  btn.addEventListener('click', something[btn.id])
);

<input type="date" id="inputFecha">
<input type="button" class="butt" id="addDate" value="add">
<input type="button" class="butt" id="deleteDate" value="remove">

What is the most efficient way to add or remove Date objects from arrays?

Answer №1

Similar questions

Is there a way to transfer a value from one JS function to another in Node.js?

Keeping a while loop going with JSON object stored as array within another array

Customize the appearance of the Vue.js datepicker starting from today's date

The program encountered an issue trying to access the property 'map' of an undefined element in ReactJS utilizing AJAX

hide bootstrap confirmation when clicking off of it

Sending a null variable via an AJAX post request from jQuery to PHP

Closing md-tooltip automatically after a specified timeout period

Angular JS page in its purest form

I am looking to efficiently sort and structure information from a CSV file using PHP

Error Encountered: Module Missing Following NPM Installation

Assigning specific class names to elements within an array using JavaScript

From milliseconds to hours: a straightforward conversion

Creating a unique filter that combines and filters data from two separate API calls for

Ways to avoid browser refresh when uploading files in React applications

Notifying with Jquery Alert after looping through routes using foreach loop

Utilizing relative URIs in Node.js request library

Is React the ideal choice for implementing a shared state subscription mechanism in your project?

"Exploring the blend of VueJS, ExpressJS, and MySQL in architectural design - A deep dive into

Angular foreach method encounters a syntax issue

Issue with CSV download box not showing up on Rails version 2.3.11