slibra-module-web/src/views/carbon/components/BaseDatePicker.vue

<script setup>
import { ref, computed } from 'vue';
import { c, NPopover } from 'naive-ui';
import VueDatePicker from '@vuepic/vue-datepicker';
import dayjs from 'dayjs';

const dateValue = ref(null);
const popoverTriggerRef = ref(null);
const modelValue = defineModel('value');
const modelFormatValue = defineModel('formatValue');
import { addMonths, getMonth, getYear, subMonths } from 'date-fns';
const props = defineProps({
  isNoInp: {
    type: Boolean,
    default: false
  },
  dark: {
    type: Boolean,
    default: false
  },
  disabledMonth: {
    type: Array,
    default:() => []
  }
})

const onSelectMonth = (time) => {
  const month = time.month < 9 ? `0${time.month + 1}` : time.month + 1;
  const timeStr = `${time.year}-${month}`;
  const date = dayjs(timeStr, 'YYYY-MM');
  const timestamp = date.valueOf();
  dateValue.value = time;
  modelValue.value = timestamp;
  modelFormatValue.value = timeStr;
  setTimeout(() => popoverTriggerRef.value.setShow(false), 200);
}

// const allowedDates = (val) => {
//   console.log(val);
//   return [ new Date()]
// }

const allowedDates = computed(() => {
  console.log(new Date());
  const a = dayjs('2024-4', 'YYYY-M').format()
  console.log(a);
  return [
  a
  ];
});
// const allowedDates = (date) => {
//   // 获取当前日期的月份
//   const month = date.getMonth(); // 月份是从 0 开始的，0 代表一月
//   // 禁用特定月份，例如 3 月和 4 月
//   return ![3, 4].includes(month);
// };

const filters = computed(() => {
  const currentDate = new Date()
  return {
    months: Array.from(Array(3).keys())
            .map((item) => {
              console.log( getMonth(addMonths(currentDate, item + 1)) );
              return getMonth(addMonths(currentDate, item + 1))
            })
  }
})


const disabledDates = computed(() => {
  const today = new Date();

  const tomorrow = new Date(today)
  tomorrow.setDate(tomorrow.getDate() + 1)

  const afterTomorrow = new Date(tomorrow);
  afterTomorrow.setDate(tomorrow.getDate() + 1);
  console.log( tomorrow );

  const date = dayjs('2024-06', 'YYYY-MM');

  return [tomorrow, date]
})
</script>

<template>
  <NPopover trigger="click" raw :animated="false" ref="popoverTriggerRef">
    <template #trigger>
      <slot></slot>
    </template>
    <div>
      <VueDatePicker month-picker inline locale="zh" v-model="dateValue" 
        ref="datePickerRef" :dark="dark" :allowed-dates="allowedDates">
        <template #action-row></template>
      </VueDatePicker>
    </div>
  </NPopover>
</template>

<style lang="scss" scoped>
:deep(.dp__overlay_cell_active) {
  background-color: #2454FF;
}
</style>