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>

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