在 datetime-local 类型的输入中添加一天

Question

最好的问候我有一个问题，因为我试图做的是在 datetime-local 类型的输入上多加一天，我尝试使用 JQuery 但它只适用于我的输入是我想知道如何使用 datetime-local 对我有用的日期类型 这是我作为参考的代码，适用于日期：

$('#checkInDate')[0].valueAsDate = new Date();

    $('#checkInDate').change(function() {
    var date = this.valueAsDate;
    date.setDate(date.getDate() + 1);
    $('#checkOutDate')[0].valueAsDate = date;
    });

    $('#checkInDate').change();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Date Ini:  <input type="date" id="checkInDate">
Date Out: <input type="date" id="checkOutDate"> <br>

Answer 1

datetime-local 输入没有 valueAsDate 属性。但你可以改用valueAsNumber。

因此，无论何时设置值，都使用input.valueAsNumber = +date 将日期对象转换为一个数字，每当您检索该值时，将其转换为使用new Date(input.valueAsNumber) 的日期

此外，为了设置日期的初始值，将精度限制为分钟，您可以使用Math.floor(Date.now() / 6e4) * 6e4，并考虑时区，您可以减去时区偏移量。

$('#checkInDate')[0].valueAsNumber = 6e4 * (Math.floor(Date.now() / 6e4) - new Date().getTimezoneOffset());

$('#checkInDate').change(function() {
  var date = new Date(this.valueAsNumber);
  date.setDate(date.getDate() + 1);
  $('#checkOutDate')[0].valueAsNumber = +date;
  
  console.log(new Date(this.value)) // retrieving as data
});

$('#checkInDate').change();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Date Ini:  <input type="datetime-local" id="checkInDate">
Date Out: <input type="datetime-local" id="checkOutDate"> <br>

当然，在检索要在后端使用或存储在数据库中的数据时，请确保从this.value 而不是this.valueAsNumber 构造日期对象。