Nuxtjs/Vuejs 将日期时间-本地类型的输入字段的默认日期时间设置为当前日期时间

Question

我有一个 Nuxtjs/Vuejs 应用程序，其中包含 datetime-local 类型的输入字段。对于此字段，我想将当前 DateTime 添加为默认值。我在 AngularJS 中做过类似的事情，但由于某种原因，它在 Vuejs 中不起作用。

字段如下：

<input v-model="formData.eventtimeSpecific" type="datetime-local" class="form-control" title="Set Specific Event Time">

下面是它的JS函数：

export default {
 data(){
  return {
   formData:{
    eventtimeSpecific: new Date(),
   }
  }
 },
  mounted () {
    const today = new Date()
    this.formData.eventtimeSpecific.setHours(today.getHours(), today.getMinutes(), 0, 0)
  },
}

我在 Angularjs 中尝试过的类似方法很有效：

$scope.formdata.eventtimeSpecific = new Date();
var h = $scope.formdata.eventtimeSpecific.getHours();
var m = $scope.formdata.eventtimeSpecific.getMinutes();
$scope.formdata.eventtimeSpecific.setHours(h,m,0,0);

有人可以帮助我如何将当前 DateTime 值设置为 datetime-local 类型输入字段的默认值吗？

当前行为：

预期行为：

Answer 1

问题是 this.formData.eventtimeSpecific.setHours(today.getHours(), today.getMinutes(), 0, 0) returns 这种格式的时间 Wed Aug 25 2021 13:35:49 GMT+0200 但是，type="datetime-local" 只接受这种格式 2021-08-25T13:36

所以你必须格式化它：

    var now = new Date();
    var year = now.getFullYear();
    var month = now.getMonth() + 1;
    var day = now.getDate();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var localDatetime =
      year +
      '-' +
      (month < 10 ? '0' + month.toString() : month) +
      '-' +
      (day < 10 ? '0' + day.toString() : day) +
      'T' +
      (hour < 10 ? '0' + hour.toString() : hour) +
      ':' +
      (minute < 10 ? '0' + minute.toString() : minute);
    this.formData.eventtimeSpecific = localDatetime;

希望对您有所帮助！

编辑！

这是更简单的方法

this.formData.eventtimeSpecific.setMinutes(
      this.formData.eventtimeSpecific.getMinutes() - this.formData.eventtimeSpecific.getTimezoneOffset()
);
this.formData.eventtimeSpecific = this.formData.eventtimeSpecific.toISOString().slice(0, -8);

切片 -8 不包括秒数。

Nuxtjs/Vuejs 将日期时间-本地类型的输入字段的默认日期时间设置为当前日期时间

Nuxtjs/Vuejs set the default date time as current date time for the input field of type datetime-local

html

input

vue.js

nuxt.js

datetime-local