vue.jsでカレンダー入力を実現した

クラウドワークスで、お問い合わせフォームの日付入力をプルダウン形式からカレンダー入力形式に変更して欲しいというご相談を受けました。

学習ブログを書いていきます。

今回の要件

引越し予定日の年・月・日をカレンダーから選択できるようにする。

ライブラリを使うための準備

まずは、vue.jsとvuejs-datepickerを読み込みました。

• https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js
• https://unpkg.com/vuejs-datepicker

最も基本的な形

See the Pen vue datepicker by Shibata Hiroki (@khiro-enginner) on CodePen.

Resultの入力欄をクリックするとカレンダーが表示されます。

日付をクリックすると「01 Dec 2022」のような形で入力されます。

HTMLやJSをクリックすると、ソースコードを確認できます。

このままだと、英語が入っているので、我々日本人にとっては実用的では無いかもしれません。

年・月・日を表示させる

入力後に、「2022年12月01日」のような形にしてみました。

See the Pen vue datepicker 日本語対応 by Shibata Hiroki (@khiro-enginner) on CodePen.

手順1: HTMLでフォーマットの属性を指定する

<vuejs-datepicker 
 :format="DatePickerFormat"
>    
</vuejs-datepicker>

手順2: vue.jsでフォーマットを指定する

data: {
  DatePickerFormat: 'yyyy年MM月dd日'
},

ただし、カレンダーが英語のままなので、我々日本人にとってはまだ実用的では無いです。

カレンダーを日本語にする

カレンダーが日本語になりました。

See the Pen vue datepicker 年・月・日を表示させる by Shibata Hiroki (@khiro-enginner) on CodePen.

手順1: 言語用ライブラリの読み込み

こちらの言語用ライブラリを読み込みます。
https://cdn.jsdelivr.net/npm/vuejs-datepicker@1.6.2/dist/locale/translations/ja.js

手順2: HTMLに言語の属性を追加する

<vuejs-datepicker 
 :format="DatePickerFormat"
 :language="ja"
>
</vuejs-datepicker>

手順3: vue.jsで、言語のデータを追加する

data: {
　DatePickerFormat: 'yyyy年MM月dd日',
　ja: vdp_translation_ja.js
},

ただ、今日より前の日付も選べてしまうので、やや実用的では無いかもしれません。

今日より前の日付を選べなくする

今日より前の日付を選べなくしました。

See the Pen vue datepicker 日本語対応 by Shibata Hiroki (@khiro-enginner) on CodePen.

手順1: HTMLに属性を追加する

<vuejs-datepicker 
 :format="DatePickerFormat" 
 :language="ja" 
 :disabled-dates="disabledDates"
>
</vuejs-datepicker>

手順2: Vue.jsに、データを追加する

data: {
    DatePickerFormat: "yyyy年MM月dd日",
    ja: vdp_translation_ja.js,
    disabledDates: {
      to: new Date(
        new Date().getFullYear(),
        new Date().getMonth(),
        new Date().getDate()
      )
    }
  },