Viteとバニラjs – 日付選択とリスト並び替えのウィジット

前回ではviteでのjquery-uiパッケージ対応を説明しましたが、今度はjqueryをまったく使わない日付選択とリスト並び替えのウィジットの対応とします。かと言って、javascript（バニラJS？）でそれらのUIウィジットをスクラッチから作成するわけではありません。jquery-uiに取り替わるjqueryを必要としないパッケージを探します。

Vanilla JS Datepicker

日付の選択のパッケージはいくつかありますが、Vanilla JS Datepickerが良さそうです。jquery-uiのdatepickerの日付選択と同様に以下のようにカレンダーが表示できます。

jquery-uiとは違い、年の部分をクリックすれば以下のように月での選択を容易にしています。年の選択も同様に可能です。

ブレードでは以下のようにDOMのid (#datepicker) にDatePickerを関連付けます。jquery-uiと同様にローカライズや日付のフォーマットの指定も可能です。

<input type="tel" id="datepicker" name="start" class="form-control">
...
<script type="module">
    document.addEventListener('DOMContentLoaded', function() {
        const datepicker = document.getElementById('datepicker');
        if (datepicker) {
            new Datepicker(datepicker, {
                autohide: true,
                buttonClass: 'btn',
                format: 'mm/dd/yyyy', //　日付フォーマット
                language: 'ja', // 日本語化を指定
            });
        }
    });
</script>

このパッケージのドキュメントは以下からアクセスできます。
https://mymth.github.io/vanillajs-datepicker

SortableJS

jquery-uiのsortableの代わりとしては、SortableJSがおすすめです。

こちらはブレードでは以下のように設定が可能です。

<div class="row mb-3">
    <label class="col-md-4 col-form-label text-md-end">順番の並べ替え</label>
 
    <div class="col-md-6">
        <ol id="sortable">
            <li class="ui-state-default">アイテム 1</li>
            <li class="ui-state-default">アイテム 2</li>
            <li class="ui-state-default">アイテム 3</li>
        </ol>
    </div>
</div>
...
<script type="module">
    document.addEventListener('DOMContentLoaded', function() {
        Sortable.create(document.getElementById('sortable'));
    });
</script>

viteで対応

これらのパッケージをviteで対応（コンパイル）するには、

以下で２つパッケージと取り入れます。

$ npm install vanillajs-datepicker --save-dev 
$ npm install sortablejs --save-dev

次に、bootstrap.jsでそれらをインポートします。DatePickerでは、Bootstrap 5のためのCSSや日本語化を指定します。
SorableとDatepickerはwindow.をプレフィックスとしてグローバル変数としています。jQueryのインポートがないことに注意を。

import Datepicker from 'vanillajs-datepicker/Datepicker';
import'vanillajs-datepicker/css/datepicker-bs5.min.css'; // Bootstrap 5を取り入れる
import ja from 'vanillajs-datepicker/locales/ja'; // 日本語を取り入れる
Object.assign(Datepicker.locales, ja);
window.Datepicker = Datepicker;

import Sortable from 'sortablejs';
window.Sortable = Sortable;

そして最後に、vite.config.jsの設定は以下のようになります。

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});