Vue-datepicker-next 年分不可選區間如何做？

接手前輩的專案作維運，他使用的日曆套件是 Vue-datepicker-next，所以我也針對這個套件做了一番研究。大致上的參數用法在官網的 Demo 上都有示範，而我比較困惑的部分是在於年分的 disabled 部分，官網 Demo 並沒有示範年份不可選區間的部分，所以我做了一下研究。

我把 Vue-datepicker-next 取得的年份值，印在畫面上，發現它是以當年份的一月一日00:00:00當值。

<script setup>
import { ref, watch } from 'vue';
import HelloWorld from './components/HelloWorld.vue';
import DatePicker from 'vue-datepicker-next';
import 'vue-datepicker-next/index.css';

const yearValue = ref(null);
watch([yearValue], () => {
  console.log(yearValue);
});
</script>

<template>
  <section>
    <p>{{ yearValue }}</p>
    <date-picker
      v-model:value="yearValue"
      type="year"
      placeholder="Select year"
    ></date-picker>
  </section>
</template>

Vue-Datepicker-next 是用disadled-date這個屬性來控制不可選的區間，例如我希望2016年前及今年之後的年份不可選，我把 disadled-date 綁定一個 disabledYearRange (名稱為自定義)的函式，返回小於2016-01-01T00:00:00 的時間，及大於今天的年份，就可以達成如下圖的效果，User只能選擇2016-2024的區間，其他皆為不可選的年份。

<script setup>
import { ref, watch } from 'vue';
import HelloWorld from './components/HelloWorld.vue';
import DatePicker from 'vue-datepicker-next';
import 'vue-datepicker-next/index.css';

const yearValue = ref(null);

watch([yearValue], () => {
  console.log(yearValue);
});

//disadled-date 綁定
function disabledYearRange(year) {
  const today = new Date();
  var myDate = new Date('2016-01-01T00:00:00');
  today.setHours(0, 0, 0, 0);

  return (
    year < myDate || year > new Date(today.getTime() )
  );
}
</script>

<template>
  <section>
    <p>{{ yearValue }}</p>
    <date-picker
      v-model:value="yearValue"
      type="year"
      placeholder="Select year"
      :disabled-date="disabledYearRange"
    ></date-picker>
  </section>
</template>

示範:
https://stackblitz.com/edit/vitejs-vite-btrgzf?file=src%2FApp.vue

Leave a ReplyCancel Reply