Vuetifyで2か月カレンダーが並んだDatePickerをつくる

もともとはFlatpickrでやってたやつを移植するために作ったもの。
消えてしまうのも惜しいのでおいておく。
左右のカレンダーをうまく動かすのに一工夫いる

CodePen

---

HTML

<script type="text/x-template" id="app-template">
  <v-app>
    <v-card>
      <v-date-picker
        v-model="range"
        :day-format="dayFormat"
        locale="ja-jp"
        next-icon=""
        no-title
        :picker-date.sync="leftPicker"
        range
      />
      <v-date-picker
        v-model="range"
        :day-format="dayFormat"
        locale="ja-jp"
        no-title
        :picker-date.sync="rightPicker"
        prev-icon=""
        range
      />
    </v-card>
  </v-app>
</script>

<div id="app"></div>

CSS

/* 月送りの矢印を隠す */
.v-picker--date:first-of-type
  .v-date-picker-header
  button.v-btn--round:last-of-type {
  z-index: -1;
}
.v-picker--date:last-of-type
  .v-date-picker-header
  button.v-btn--round:first-of-type {
  z-index: -1;
}

/* 土日の色を変える */
.v-date-picker-table--date thead th:first-of-type {
  color: rgba(255, 0, 0, 0.62);
}
.v-date-picker-table--date thead th:last-of-type {
  color: rgba(0, 0, 255, 0.62);
}

JS

const App = {
  template: '#app-template',
  data: () => ({
    range: ['2024-01-11', '2024-02-09'],
    leftPicker: '2024-01',
    rightPicker: '2024-02',
  }),
  watch: {
    leftPicker(val) {
      const d = dateFns.parse(val, 'yyyy-MM', new Date())
      const rd = dateFns.addMonths(d, 1)
      const f = dateFns.format(rd, 'yyyy-MM')
      this.rightPicker = f
    },
    rightPicker(val) {
      const d = dateFns.parse(val, 'yyyy-MM', new Date())
      const ld = dateFns.subMonths(d, 1)
      const f = dateFns.format(ld, 'yyyy-MM')
      this.leftPicker = f
    }
  },
  methods: {
    dayFormat(date) {
      return new Date(date).getDate()
    }
  }
}

new Vue({
  vuetify: new Vuetify(),
  render: h => h(App)
}).$mount('#app')