2021/06/14 (更新日: 2021/06/15)

Vue3対応かつ日付と日時を同時に対応したpicker【vue-flatpickr-component】

vue3に対応してて、いい感じに日付と日時を入力できるpickerをさがしていたところ「vue-flatpickr-component」に出会いました。

インストール方法

npm install vue-flatpickr-component

まずは最小単位で動作するかテストします。下記ですと日付のみの入力になります。

<template>
    <div>
        <flat-pickr v-model="date"></flat-pickr>
    </div>
</template>

<script>
    import flatPickr from 'vue-flatpickr-component';
    import 'flatpickr/dist/flatpickr.css';

    export default {
        data() {
            return {
                date: null,
            }
        },
        components: {
            flatPickr
        }
    }
</script>

日付と日時を同時に入力するように設定。オプションの enableTime: true を設定します。

<template>
    <div>
        <flat-pickr v-model="date" :config="config"></flat-pickr>
    </div>
</template>

<script>
    import flatPickr from 'vue-flatpickr-component';
    import 'flatpickr/dist/flatpickr.css';

    export default {
        data() {
            return {
                date: null,
                config: {
                  enableTime: true,
                  dateFormat: "Y-m-d H:i",
               },
            }
        },
        components: {
            flatPickr
        }
    }
</script>