「Vue 3 Datepicker」やりたいことは何でもできるんじゃない？！

環境
Vue 3 Datepickerとは？
Vue 3 Datepickerの機能紹介
まとめ

環境

このページで使用しているフレームワークやライブラリのバージョンは、以下のとおりです。

vue.js	3.2.37
Vue 3 Datepicker	7.2.2

Vue 3 Datepickerとは？

「Vue 3 Datepicker」は、Vue3で使用できるDate-Time-Pickerライブラリです。

今回、以下の機能を持ったDate-Time-Pickerを探していて見つけたライブラリです。

日付と時刻が入力できること。
時刻は、「秒」まで入力できること。
日本語表記に対応できること。
モダンなデザインで、使いやすいUIであること。

デザインや使い勝手は、好みのわかれるところですが、この「Vue 3 Datepicker」は、何より機能が豊富です。

「やりたいこと、何でもできるじゃん！」と感激したので、是非とも紹介したくなりました。

Vue 3 Datepickerの機能紹介

「Vue 3 Datepicker」は、とにかく機能が豊富です。
全ての機能は、公式のドキュメントを見てもらうとして、ここでは、一部の機能と実際のソースコードを紹介します。

デフォルト状態

まずは、デフォルトの状態です。
厳密には、デフォルト状態にplaceholderを追加しています。

下のテキストボックスをクリックして、実際の日時を入力してみてください。

コード

<div id="app-default">
    <datepicker
        placeholder="ここをクリックして日時を入力"
        v-model="date"
    ></datepicker>
</div>

<script>
    Vue.createApp({
        components: { Datepicker: VueDatePicker },
        data() {
            return { date: Vue.ref() };
        },
    }).mount("#app-default");
</script>

フォーマットの変更

デフォルトの状態では、入力した日時が「MM/DD/YYYY, HH:mm」のフォーマットで表示されます。
このフォーマットを「YYYY-MM-DD HH:mm:ss」に変更します。

コード

<div id="app-format">
    <datepicker
        placeholder="ここをクリックして日時を入力"
        v-model="date"
        v-bind:format="format"
    ></datepicker>
</div>

<script>
    Vue.createApp({
        components: { Datepicker: VueDatePicker },
        data() {
            return {
                date: Vue.ref(),
                format: (date) => {
                    const year = date.getFullYear();
                    const month = String(date.getMonth() + 1).padStart(2, "0");
                    const day = String(date.getDate()).padStart(2, "0");
                    const hours = String(date.getHours()).padStart(2, "0");
                    const minutes = String(date.getMinutes()).padStart(2, "0");
                    const seconds = String(date.getSeconds()).padStart(2, "0");

                    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
                },
            };
        },
    }).mount("#app-format");
</script>

日本語表記にする

<datepicker>タグにlocale="jp"を追加するだけで、曜日が日本語表記になります。

cancel-text="キャンセル"、select-text="OK"も追加して、”Cancel”を”キャンセル”、”Select”を”OK”に変更します。

「月」の数字の後ろに”月”、「年」の数字の後ろに”年”の文字を表示するには、
<template year="{ value }"> {{ value }}年></template>
を追加します。

Vue 3 Datepickerのバージョン5.x.xまでは、<template>タグの赤字部分を下記のとおりyearにする必要がありました。

<template year="{ year }"> {{ year }}年></template>

このように、Vue 3 Datepickerは、バージョンによって仕様が大きく変わりますので、注意が必要です。

これ以降、実際のコードは、<datepicker>…</datepicker>タグの部分のみが変更になりますので、<datepicker>…</datepicker>タグ部分のみを掲載します。

コード

    <datepicker
        placeholder="ここをクリックして日時を入力"
        v-model="date"
        v-bind:format="format"
        locale="jp"
        cancel-text="キャンセル"
        select-text="OK"
    >
        <template #year="{ value }"> {{ value }}年 </template>
    </datepicker>

「秒」を入力できるようにする

<datepicker>タグにenable-secondsを追加するだけで、時刻入力で「秒」も入力できるようになります。

コード

    <datepicker
        placeholder="ここをクリックして日時を入力"
        v-model="date"
        v-bind:format="format"
        locale="jp"
        cancel-text="キャンセル"
        select-text="OK"
        enable-seconds
    >
        <template #year="{ value }"> {{ value }}年 </template>
    </datepicker>

2つのカレンダーを表示して期間を入力する

最後に2つのカレンダーを表示して、期間を入力する例です。
<datepicker>タグにrangeとmulti-calendarsを追加します。

日時が格納される変数dateが配列になるので、format関数が少し複雑になります。

コード

<div id="app-multi">
    <datepicker
        placeholder="ここをクリックして日時を入力"
        v-model="date"
        v-bind:format="format"
        locale="jp"
        cancel-text="キャンセル"
        select-text="OK"
        enable-seconds
        range
        multi-calendars
    >
        <template #year="{ value }"> {{ value }}年 </template>
    </datepicker>
</div>

<script>
    Vue.createApp({
        components: { Datepicker: VueDatePicker },
        mounted() {
            this.date = [];
        },
        data() {
            return {
                date: Vue.ref(),
                format: (date_array) => {
                    let result = "";
                    date_array.forEach((date, index) => {
                        if (Object.prototype.toString.call(date) == "[object Date]") {
                            const year = date.getFullYear();
                            const month = String(date.getMonth() + 1).padStart(2, "0");
                            const day = String(date.getDate()).padStart(2, "0");
                            const hours = String(date.getHours()).padStart(2, "0");
                            const minutes = String(date.getMinutes()).padStart(2, "0");
                            const seconds = String(date.getSeconds()).padStart(2, "0");

                            result += `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
                            if (index == 0) {
                                result += ` - `;
                            }
                        }
                    });

                    return result;
                },
            };
        },
    }).mount("#app-multi");
</script>