Vue datepickerで【和暦】＋【年度/月】の表示

Vue datepickerの年選択と選択年月日で和暦表示を追加する

vueDatepickerを使用して生年月日を入力する際に和暦がないと入力者が大変なので表示上和暦を追加することになった。

環境

• vue3(Composition API script setup )
• vue-datepicker "6.0.2"

参考サイト

Vue datepicker公式(#year-overlay)

最終結果

準備

year-overlayを利用して年選択画面を"select"仕様に書き換える。
公式はTypeScriptを使用しているため、変更を加える。

(公式より↓抜粋　+　変更)

vue

<template>
    <VueDatePicker v-model="date">
      <template 
          #year-overlay="{
              month,
              year,
              items,
              updateMonthYear,
              toggle
           }">
            <div>
              <select
                  class="select-input"
                  :value="year"
                  @change="updateYear($event, updateMonthYear, month, toggle)"
              >
                <option v-for="item in items" :key="item.value" :value="item.value">{{ item.text }}</option>
              </select>
            </div>
            <button @click="toggle">Close</button>
      </template>
    </VueDatePicker>
</template>

//TypeScritから変更
//<script lang="ts" setup> 
<script setup>

import { ref } from 'vue';

const date = ref(new Date());

//type UpdateMonthYear = (month: number, year: number) => void;

//const updateYear = (
//    event: InputEvent,
//    updateMonthYear: UpdateMonthYear,
//    month: number,
//    toggle: () => void) => {
//      updateMonthYear(month, +(event.target as HTMLSelectElement).value);
//      toggle();
//};

//TypeScritから変更
const UpdateMonthYear = (month, year) => {};

const updateYear = (event, updateMonthYear, month, toggle) => {
    updateMonthYear(month, +event.target.value);
    toggle();
};

</script>

和暦追加

和暦変換関数

toJapaneseEra

  const toJapaneseEra = (year,month) => {
    let era = "";
    let eraYear = 0;
      if (year === 2019 && month >= 5) {
        era = "令和";
        eraYear = "元年";
      } else if (year >= 2020) {
        era = "令和";
        eraYear = year - 2018;
      } else if (year >= 1989) {
        era = "平成";
        eraYear = year - 1988;
      } else if (year >= 1926) {
        era = "昭和";
        eraYear = year - 1925;
      } else if (year >= 1912) {
        era = "大正";
        eraYear = year - 1911;
      } else if (year >= 1868) {
        era = "明治";
        eraYear = year - 1867;
      } else {
        return "対応していない年です";
      }
     return era + eraYear;
  };

和暦表示用カスタムフォーマット作成

JavaScript

const customFormat = (date) => {
 const year = date.getFullYear();
 const month = date.getMonth() + 1;
 const day = date.getDate();
 const japaneseEra = toJapaneseEra(year,month);

  const formatFormattedDate  = `生年月日：${japaneseEra}(${year})年${month}月${day}日`;

  return formatFormattedDate;
};

公式のVue datepickerタグの変更

vue

<VueDatePicker v-model="birthday"
 locale="jp"
 placeholder="(生年月日)"
 :format="customFormat"
 :enable-time-picker="false"
 :teleport="true"
  auto-apply
>
   <template
     #year-overlay="{
       month,
       year,
       items,
       updateMonthYear,
       toggle
     }">
     <div class="w-100 h-100 flex items-center justify-center">
       <select multiple
         :value="year"
         class="mx-auto"
         style="height: 230px;width: 250px;text-align: center;font-size: medium;"
         @change="updateYear($event, updateMonthYear, month, toggle)"
       >
         <option v-for="item in items" :key="item.value" :value="item.value">
           {{ toJapaneseEra(item.value,month) }} ({{ item.text }}) 年
         </option>
       </select>
     </div>
   </template>
</VueDatePicker>