LaravelでVue.jsのdatepickerを使う方法

datepickerをインストールする

下記コマンドでVue.jsのdatepickerをインストールします。

npm i vuejs-datepicker

インストールできたら、resources/jsフォルダ内のapp.jsでコンポーネントを読み込みます。

// resources/js/app.js

import Datepicker from 'vuejs-datepicker';

const app = new Vue({
    el: '#app',
    components: {
        Datepicker,
    }
});

これで、bladeファイル内でdatepickerのコンポーネントが使用できます。

// bladeファイル

<datepicker name="date" value=""></datepicker>

表示フォーマットを変更する

デフォルトでは英語表記になっているので、datepickerにformat属性を追加して表示フォーマットを変更します。

// bladeファイル

<datepicker name="date" value="" format="yyyy-MM-dd"></datepicker>

フォーマットに使える表記の種類は下記表の通りです。

コード	説明	表示例
d	日	1
dd	2文字の日	01
D	省略形曜日（英語）	Mon
M	月	1
MM	2文字の月	01
MMM	省略形月（英語）	Jan
MMMM	月（英語）	January
yy	2文字の年	21
yyyy	4文字の年	2021

言語設定を日本語にする

表示フォーマットの次に、言語設定も日本語にします。app.jsで日本語化ファイルをimportして、Vueインスタンスのdataに登録します。登録した言語をlanguage属性で設定します。v-bind:で登録するので、下記例では省略表記で記載しています。

// resources/js/app.js

import Datepicker from 'vuejs-datepicker';
import {ja} from 'vuejs-datepicker/dist/locale'; // ここを追加

const app = new Vue({
    el: '#app',
    // ここから追加
    data() {
        return {
            ja: ja,
        }
    },
    // ここまで追加
    components: {
        Datepicker,
    }
});

// bladeファイル

<datepicker name="date" value="" format="yyyy-MM-dd" :language="ja"></datepicker>

これで、年・月・曜日のエリアが日本語表記に変わります。