V-Calendarでv-modelの値がフォーマット通りにならない時の解決方法

2019年6月13日

はじめに

 

V-Calendarv-modelの値が指定のフォーマット通りに表示されてくれない時の対応方法です。

 

V-Calendardatepickerの基本的な使い方は以下を参考にしてください。

VueJS製datepickerにもなる「V-Calendar」の使い方

 

環境

  • vue.js: 2.5.17
  • v-calendar: 0.9.7

 

導入手順

1. Moment.jsを呼び出す

JSで時間を扱うならMoment.jsを使うとすごく楽です。

https://momentjs.com/

今回はCDNから呼び出します。

<script src="https://momentjs.com/downloads/moment.js"></script>

2. 変換用のfiltersを用意する

new Vue({
 el: '#app',
 ...
 data: {
    selectedDate: '2018-10-04',
 },
 filters:{
    customformat: function(value){
      return moment(value).format('YYYY-MM-DD');
    }
  }
});

3. 出力時にmethodsを経由する

{{selectedDate|customformat}}

 

サンプル

>>専用ページで確認する

 

まとめ

V-Calendarの記事ですが、熱いMoment.js押しです。

てかvuejs-datepickerの単語替えただけやんけ!というツッコミはNGで。

vuejs-datepickerでv-modelの値がフォーマット通りにならない時の解決方法

 

今日はこの辺でー

 

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-vue.js
-, , , ,