Vue.jsで日付入力を扱う場合、カレンダー形式のインターフェースを提供する「日付ピッカー」はユーザーの入力ミスを減らし、操作性も向上させます。その中でもflatpickrは軽量かつ多機能で、Vueとの親和性も高い人気ライブラリです。本記事では、Vue 3 + Composition APIでflatpickrを導入し、日付選択を可能にする方法を解説します。
flatpickrの特徴
- カレンダー形式で直感的な日付選択が可能
- 日本語対応、範囲選択、時刻ピッカーなど豊富なオプション
- 軽量・高速な表示
インストール方法
npm install flatpickr日本語化用のロケールファイルも同時に利用できます。
スタイルの読み込み
// main.js または対象のコンポーネントで
import 'flatpickr/dist/flatpickr.min.css'
日付ピッカーを組み込むコンポーネント例
<template>
<div>
<input type="text" ref="inputRef" placeholder="日付を選択してください" />
<p>選択された日付: {{ selectedDate }}</p>
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import flatpickr from 'flatpickr'
import { Japanese } from 'flatpickr/dist/l10n/ja.js'
const inputRef = ref(null)
const selectedDate = ref('')
let pickerInstance = null
onMounted(() => {
pickerInstance = flatpickr(inputRef.value, {
locale: Japanese,
dateFormat: 'Y-m-d',
defaultDate: new Date(),
onChange: (selectedDates) => {
selectedDate.value = selectedDates[0].toLocaleDateString()
}
})
})
onBeforeUnmount(() => {
if (pickerInstance) {
pickerInstance.destroy()
}
})
</script>
オプションの活用例
flatpickrは以下のような追加オプションにも対応しています：
enableTime: true… 時間選択付きminDate: "today"… 本日以降のみ選択可能mode: "range"… 日付の範囲を選択可能
flatpickr(inputRef.value, {
enableTime: true,
minDate: "today",
mode: "range"
})
まとめ
flatpickrはVueアプリケーションに日付ピッカー機能を簡単に組み込めるライブラリであり、見た目・操作性ともに優れています。フォーム入力や予約画面、検索条件など日付を扱う場面では、flatpickrを導入することでユーザー体験を大きく向上させることができます。シンプルな実装から高度な設定まで対応できるため、実務アプリにも最適です。
