web-dev-qa-db-ja.com

vue jsでその日のデフォルトの日付を設定する方法

日付ピッカーにデフォルトで日付を設定したいのですが。

コード：

<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について言われましたが、どのように使用するのかわかりません。

javascripthtmldatevue.jsvuejs2
2
Cedric Tegue

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/[email protected]/dist/vue.js"></script>
<div  id='vueRoot'>
    <input type='date' v-model='myDate'>
    <br>
    {{myDate}}
</div>

もちろん、日付をフォーマットまたは比較する場合は、モデルの日付オブジェクトとして日付を使用することをお勧めします。その場合、v-modelを避け、バインディングの両側を別々にコーディングする必要があります このように 。

2
bbsimonbb

v-modelバインディング

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

イベントを発行します

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