flatpickrをLaravel9 + Vite環境で使ってみた

flatpickrというカレンダーのライブラリをLaravel9とViteの環境で使用しました。

使用するまでの準備や設定などを残しておきます。

公式サイトはこちら

インストール

npm i flatpickr --save

ターミナルで上記のコマンドを使用すればインストールできます。

インストール後、package.jsonのdependenciesの部分にflatpickrが追加されていればOKです。

    "dependencies": {
        "flatpickr": "^4.6.13"
    }

設定

bladeファイルにカレンダーを表示させたいinput要素を設定します。

<input type="text" id="startDate">

Laravelプロジェクトのresources/js 配下にflatpickr.jsというファイルを作成します。
（ファイル名は任意のもので大丈夫です）

import flatpickr from "flatpickr";

flatpickr("#startDate", {   // #startDateはinput要素のid
    dateFormat: "Y-m-d",  // オブジェクト形式でオプションを選べます
});

※オプションの詳細はこちらを参考に色々試してみてください。

Laravelプロジェクトのルートディレクトリにある「vite.config.js」にflatpickrを追加します。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/js/flatpickr.js',  //　ここが追加部分
            ],
            refresh: true,
        }),
    ],
});

CSSも読み込みます。

resources/css/app.css に下記を追加します。

@import 'flatpickr/dist/flatpickr.css';

最後にheadで読み込ませればOKです。

（例）views/layouts/app.blade.php

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name=”robots” content=”noindex” />

    <title>{{ config('app.name', 'Laravel') }}</title>

    <link rel="stylesheet" href="{{ asset('css/style.css') }}">

    <!-- Scripts -->
    @vite(['resources/css/app.css', 'resources/js/app.js', 'resources/js/flatpickr.js'])
    ↑ここの1行を追加して読み込ませる

</head>

以上で使用ができるようになったと思います。

CSSを読み込ませる必要があることに気づかず、設定に時間がかかってしまいましたが、わかれば簡単でした。

オプションを使用すると色々なことができるようなので、今度試してみようかなと思います。

では〜。