Question

我想在我的datepicker中默认设置日期。

代码：

<template lang="html">
  <input type="date" v-model="date">
</template>
<script lang="js">
export default {
name: 'component',
props: [],
mounted() {

},
data() {
  return {
    // date: new Date().toJSON.split('T')[0],
    date: new Date(),
  }
},
methods: {

},
computed: {

},
               }
</script>

不幸的是，它不起作用，我被告知时刻js但我不知道我们如何使用它

Answer 1

Date输入上的

v-model使用yyyy-MM-dd格式的字符串。如果您乐意在模型中使用字符串，而不是日期对象，那么只需将默认日期字符串放在日期变量中，就像这样。

date : new Date()toISOString().slice(0,10)

这是一个正在运行的例子。名称已更改，以避免变量名称接近保留关键字！

vm = new Vue({
  el : '#vueRoot',
  data : { myDate : new Date().toISOString().slice(0,10) }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div  id='vueRoot'>
    <input type='date' v-model='myDate'>
    <br>
    {{myDate}}
</div>

当然，如果要格式化或比较它们，您可能希望将日期作为模型中的日期对象。在这种情况下，您应该避免使用v-model并分别对绑定的两面进行编码，like this。

Answer 2

v-model binding

<datepicker v-model="state.date" name="uniquename"></datepicker>

发出事件

<datepicker @selected="doSomethingInParentComponentFunction" @opened="datepickerOpenedFunction" @closed="datepickerClosedFunction">

如何在vue js中设置当天的默认日期

2 个答案: