如何在数组中添加和删除 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">