OHTA412

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>

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

コード説明表示例
d1
dd2文字の日01
D省略形曜日(英語)Mon
M1
MM2文字の月01
MMM省略形月(英語)Jan
MMMM月(英語)January
yy2文字の年21
yyyy4文字の年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>

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