スリ飯屋MaLankaのフリーエンジニアな日々

このブログでは、フリーランス5期目となる自身の実体験から、フリーランスエンジニアになるためのノウハウ、ブログや沖縄移住、スリランカの最新情報について発信します。

【bootstrap-vue】input type=datetime-localの入力エリアに、今日の日付を初期値で入れたい

※記事内に提携先企業のアフィリエイト広告(リンク、バナー等)、Google広告を含む場合があります

bootstrap-vueの、input type=datetime-localの入力エリアに、今日の日付を初期値で入れたい




サンプルコード

// 関係箇所のみ抜粋しています。

<template>
  // v-modelで、calendar.startとする事で、data内の、 calendar.start にアクセス出来る
  <b-form-input id="start-label" type="datetime-local" v-model="calendar.start" min="2000-01-01T00:00" max="2099-12-31T23:59" required></b-form-input>
</template>

<script>
// moment.jsを読み込み
import moment from 'moment'

// datetime-localの値と合わせるようにフォーマットしてnowに代入
let now = moment().format('YYYY-MM-DDThh:mm')

  export default {
    data: function() {
      return {
        calendar: {
          start: now, // 上記のnowを値とする
          end: now,
        }
      }
    }
  }
</script>

参考

https://qiita.com/osakanafish/items/5ef636bbcb2c3ef94953

https://www.wakuwakubank.com/posts/606-javascript-moment/