How can I add and delete Date objects in arrays?

Question

I'm trying to update a calendar by using the component Datepicker with Vue.js, but I have some problems regarding the adding and deleting of items (in this case, Date objects)

I have already developed two javascript functions: one used for adding new Dates to an array, and another one for deleting specific dates in the same array. The thing is, when the website is loaded, I can perfectly add new dates and delete the dates that initially were created. But what I can't do is to add a new date and then delete it, because with the function I developed, the method used to return the index of the date in the array returns -1.

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);
   }
}

And some of the dates I initially created in the same file:

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

What I need is the possibility to add and delete without having to recharge the website.

It would be helpful if you could create a minimal reproducible example, so that we can just run the code and reproduce the issue. You can likely use Stack Snippets. — Heretic Monkey
Maybe try something like availableDates.push(new Date(fecha2.getFullYear(), fecha2.getMonth(), fecha2.getDate())) — Stefan Blamberg
nevermind - but @StefanBlamberg - that could fix if you are WEST of GMT — Jaromanda X

Jaromanda X Jaromanda X · Accepted Answer · 2019-03-28T00:18:00

When calling new Date(2019, 2, 30) the date created is 2019-03-30T00:00:00 IN YOUR TIMEZONE ...

~~whereas, new Date("30/3/2019") would create 2019-03-30T00:00:00Z - i.e. UCT/UTC/GMT/Zulu whatever you call it - if you are not in +0 Timezone, then this will fail~~ Not sure what I was thinking here ... complete and utter garbage :p

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);
},

As you have failed to add an MCVE, the following code is a rough dummy to show that it does work

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">

How can I add and delete Date objects in arrays?

1 Answers