概要

Vue Datepickerでググれば便利なライブラリが出てくるこのご時世。

そうせざるを得ない理由がある貴方のために、selectで日付を選択できるVue Componentを作りました。

Vuetify, Nuxt2.x Options APIを使っていますが、ご自身の環境に読み替えるのは容易いはず。

<template>
  <div>
    <div style="width: 200px" class="d-flex align-baseline">
      <v-select v-model="y" :items="optsYear" outlined dense placeholder="年" class="mr-2" />年
    </div>
    <div class="d-flex">
      <div style="width: 150px" class="d-flex align-baseline mr-4">
        <v-select v-model="m" :items="months" outlined dense placeholder="月" class="mr-2" />月
      </div>
      <div style="width: 150px" class="d-flex align-baseline">
        <v-select v-model="d" :items="days" outlined dense placeholder="月" class="mr-2" />日
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import dayjs from 'dayjs'

type Option = {
  text: string,
  value: string,
  disabled?: boolean,
}

export default Vue.extend({
  name: 'DateSelector',
  props: {
    value: { type: Date, required: true }
  },
  data () {
    return {
      years: [...Array(120)].map((_, i) => String(dayjs().year() - i)), // 120年前まで入力可能
      months: [...Array(12)].map((_, i) => String(i + 1)),
      days: [...Array(31)].map((_, i) => String(i + 1)),
      intl: new Intl.DateTimeFormat('ja-JP-u-ca-japanese', { era: 'long' })
    }
  },
  computed: {
    y: {
      get (): string { return String(dayjs(this.value).year()) },
      set (newY: string) {
        const newDate = dayjs(`${newY}-${this.m}-${this.d}`).toDate()
        this.$emit('input', newDate)
      }
    },
    m: {
      get (): string { return String(dayjs(this.value).month() + 1) },
      set (newM: string) {
        const newDate = dayjs(`${this.y}-${newM}-${this.d}`).toDate()
        this.$emit('input', newDate)
      }
    },
    d: {
      get (): string { return String(dayjs(this.value).date()) },
      set (newD: string) {
        const newDate = dayjs(`${this.y}-${this.m}-${newD}`).toDate()
        this.$emit('input', newDate)
      }
    },
    optsYear (): Option[] {
      return this.years.map((y) => {
        const jpLabel = this.intl.format(dayjs(`${y}-01-01`).toDate()).split('/')[0]
        return { value: `${y}`, text: `${y}(${jpLabel})` }
      })
    },
  },
})
</script>

ポイント

年の選択候補に和暦を入れる

Intlに食わせればOK

new Intl.DateTimeFormat('ja-JP-u-ca-japanese', { era: 'long' }).format(dayjs().toDate())
// '令和4/2/19'

/でsplitして0番目を取れば、2020(令和4)年みたいなラベルが作れる