Как я могу добавлять и удалять объекты Date в массивах?

Question

Я пытаюсь обновить календарь с помощью компонента Datepicker с Vue.js, но у меня есть некоторые проблемы, связанные с добавлением и удалением элементов (в данном случае, объектов Date)

Я уже разработал две функции javascript: одну для добавления новых дат в массив, а другую для удаления конкретных дат в том же массиве. Дело в том, что когда веб-сайт загружен, я могу отлично добавлять новые даты и удалять даты, которые были изначально созданы. Но я не могу добавить новую дату и затем удалить ее, потому что с разработанной мной функцией метод, используемый для возврата индекса даты в массиве, возвращает -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);
   }
}

И некоторые даты, которые я изначально создал в том же файле:

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

Что мне нужно, так это возможность добавлять и удалять без необходимости перезарядки сайта.

Answer 1

При звонке new Date(2019, 2, 30) дата создания 2019-03-30T00:00:00 В ВАШЕЙ ВРЕМЕННОЙ ЗОНЕ ...

тогда как new Date("30/3/2019") создаст 2019-03-30T00:00:00Z - то есть UCT / UTC / GMT / Zulu, как бы вы его ни называли - если вы не находитесь в +0 часового пояса, то это не получится Не уверен, что я думал здесь ... полная и полная фигня: p

Если inputFecha является <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);
},

Поскольку вам не удалось добавить MCVE, следующий код является грубым манекеном, чтобы показать, что он работает

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