Question

我尝试了4天，从用户选择的输入中获取了一个愚蠢的日期。看起来很简单，但请相信我，我在这里问，因为我没有解决方案。

我有一个页面/组件AddNewEvent，在此输入中，用户添加日期和时间。我必须在我的v模型中获取它，以便将其发送回数据库。

我使用bootstrap 4输入type="datetime-local"来获取日期和时间。我尝试使用一些vue插件作为日期，但所有都基于bootstrap 3，在项目中是bootstrap 4。

内部模板：

<div class="form-group">
    <label class="eda-form-label" for="event-name">Event Name <span>(Max characters number is 60)</span></label>
    <input type="text" class="eda-form-input" v-model="newEvent.eventName">
</div>
<div class="form-group">
    <label class="eda-form-label" for="exampleTextarea">Event Description <span>(Max characters number is 2000)</span></label>
    <textarea class="eda-form-input" rows="3" v-model="newEvent.description"></textarea>
</div>
<div class="form-group">
  <div class="row">
    <div class="col-6 ">
      <label class="eda-form-label" for="start-time">START TIME</label>
      <input class="form-control" type="datetime-local" v-model="dateNow">
    </div>{{createdDate(value)}}
    <div class="col-6">
      <label class="eda-form-label" for="end-time">END TIME</label>
      <input class="form-control" type="datetime-local" v-model="dateEnd">
    </div>
  </div>
</div>

在剧本中：

data() {
  return {
    dateNow: '',
    value: '',
    oldValue: ''
  }
},
watch: {
  dateNow(val, oldVal) {
    this.value = val;
    this.oldValue = oldVal;
  }
},
methods: {
    createEvent(){
      axios.post("/event", this.newEvent, 
          {'headers':{'X-AUTH-TOKEN': localStorage.token}},
          {'headers':{'Content-Type': 'application/json'}})
        .then((response) => {
          alertify.success("Success! You added a new the user"); 
          this.$router.push('/events');
        })
        .catch((response) => {
          alertify.error();

        })
    },
}

如果我在输入中使用，现在怎么样，v-model="dateNow"有效。我可以看到当我选择日期时，上午/下午时间显示我选择的日期。但我必须像这样使用它

v-model="newEvent.dateNow"

v-model="newEvent.dateEnd"

所以我可以将它添加到newEvent并将整个obj发送回数据库。

createdDate是一个在实际日期转换日期的函数。它仅用于测试，因为我必须以ms的形式将日期发送回数据库。

有人请告诉我我做错了什么，因为我在vuejs方面不是那么先进。

Answer 1

首先，您需要在datetime-locale中初始化dateNow varable：

data() {
  return {
    dateNow: new Date().toLocaleString(),
    value: '',
    oldValue: ''
  }
},

它支持这种格式：“2017-09-18T08：30”。我认为这将解决您的问题。

此外，您还需要检查浏览器兼容性，因为IE，Firefox和Safari不支持

或者您可以尝试：

<input type="datetime-local" :value="dateValue" @input="updateValue($event.target.value)" >

脚本中的

：

data() {
    return {
      dateValue: new Date().toLocaleString()
    };
  },
methods: {
   updateValue: function(value) {
      this.dateValue= value;
      this.$emit('input', value);
   }
}

试试这个

观察日期输入值并将其与v-model一起使用

1 个答案: