vue3に対応しているdatepicker(vue-flatpickr-component)でtooltipを出すのに苦労したのでメモ

flatpickr

標準のdatepickerと違い、期間を選択できる。
複数月を表示できるなど、高機能なツール。

github

vue-flatpickr-component

github

flatpickrをvue3で使いやすくしたラッパー。
サンプルのスタイル(input-groupとか)がbootstrapベースなのでtailwindcssで使う場合は注意。

resources/js/Test.vue

import flatpickr from "vue-flatpickr-component";
import "flatpickr/dist/flatpickr.css";
import { Japanese } from "flatpickr/dist/l10n/ja.js";

<script setup>
...
const date = ref("2024-02-19");

const config = ref({
  wrap: true,
  allowInput: true,
  dateFormat: "Y-m-d",
  locale: Japanese,
});
...
</script>

<template>
...
<flatpickr
  v-model="date"
  :config="config"
  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5"
  placeholder="Select date"
  name="date"
/>
...
</template>

日曜、土曜の色変え

こちらを参考に
祝日はほぼ変わらないので毎回APIたたくより
内部データ保持でもよさそうですが。

祝日になんの祝日か出したい

いろんなツールチップライブラリを試したけど表示されなかったが
よくよく調べてみたら、flatpickrの大本の要素(flatpickr-calender)のz-indexが999999になっていて他の要素が上に出ないようになっていただけだった。

1 cssを上書きする

resource/css/flatpickr-ja.css

.flatpickr-calendar.open {
  z-index: 9999 !important;
}

2 flatpickrの日を生成するeventで祝日のデータを仕込む
3 mounseenterとmouseleaveでtooltipを動的生成する。

別途ライブラリとしてdayjsとfloating-vueを使用。

resources/js/Test.vue

import {
  hideAllPoppers,
  createTooltip,
  destroyTooltip,
} from 'floating-vue';
import 'floating-vue/dist/style.css';
...
const holidays = ref({
    "2023-01-01": "元日",
    "2023-01-02": "休日 元日",
    "2023-01-09": "成人の日",
    "2023-02-11": "建国記念の日",
    "2023-02-23": "天皇誕生日",
...
};
...
const config = ref({
...
  onDayCreate: onDayCreateFlatpickr,
...
});
// 要 import days from 'dayjs';
function onDayCreateFlatpickr(selectedDates, dateStr, instance, data)
{
  const day = dayjs(data.dateObj);
  const ymd = day.format('YYYY-MM-DD');
  if (ymd in holidays.value ) {
    // dataにセットしてmouseover/leaveのイベント追加
    data.dataset.holidayName = holidays.value[ymd];     
    data.addEventListener('mouseenter', mouseEnterEventFlatpickr);
    data.addEventListener('mouseleave', mouseLeaveEventFlatpickr);
  }
}

const mouseEnterEventFlatpickr = (event) => {
  const el = event.target;
  const tooltip = createTooltip(el, {
    triggers: [],
    content: el.dataset.holidayName,
  });
  tooltip.show();
}

const mouseLeaveEventFlatpickr = (event) => {
  const el = event.target;
  destroyTooltip(el);
}