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

Posted 2023-02-22

【中文标题】如何在vue js中设置默认日期

【英文标题】：how to set the default date of the day in vue js

【发布时间】：2018-11-16 03:54:58

【问题描述】：

我想在我的日期选择器中默认设置日期。

代码：

<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>

不幸的是，它不起作用，有人告诉我 moment js，但我不知道我们如何使用它

【参考方案1】：

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。

【讨论】：

这正是我所需要的。

【参考方案2】：

v-model绑定

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

发射事件

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

【讨论】：

虽然这段代码可以解决问题，但要成为一个好的答案，它需要解释原因。