@fesjs/fes-design/es/calendar/calendarNavigator.js

fes-design for PC

import { defineComponent, computed, createVNode } from 'vue';
import { addMonths, subMonths, addYears, subYears } from 'date-fns';
import getPrefixCls from '../_util/getPrefixCls';
import { useLocale } from '../config-provider/useLocale';
import { DoubleLeftOutlined, LeftOutlined, RightOutlined, DoubleRightOutlined } from '../icon';
import { COMPONENT_NAME } from './const';
import { getToday, convertCalendarDateToDate, convertDateToCalendarDate } from './utils';

/** 切换日期的最小单位，按月、按年 */

const prefixCls = getPrefixCls('calendar-navigator');
const cls = className => `${prefixCls}-${className}`;
const props = {
  date: {
    type: Object,
    default: () => getToday(),
    required: true
  },
  navUnit: {
    type: String,
    default: 'month'
  }
};
var calendarNavigator = defineComponent({
  name: `${COMPONENT_NAME}Navigator`,
  props,
  emits: ['update:date'],
  setup: (props, _ref) => {
    let {
      emit
    } = _ref;
    const {
      t
    } = useLocale();
    const date = computed({
      get: () => props.date,
      set: nextDate => emit('update:date', nextDate)
    });
    const displayDate = computed(() => {
      if (props.navUnit === 'year') {
        return [date.value.year, ' ', t('datePicker.year')].join('');
      }
      return [date.value.year, ' ', t('datePicker.year'), ' ', t(`datePicker.month${date.value.month + 1}`)].join('');
    });
    const handleDateChange = (unit, direction) => {
      let manipulate;
      if (unit === 'month') {
        manipulate = direction === 'add' ? addMonths : subMonths;
      } else {
        manipulate = direction === 'add' ? addYears : subYears;
      }
      const nextDate = manipulate(convertCalendarDateToDate(date.value), 1);
      date.value = convertDateToCalendarDate(nextDate);
    };
    return () => createVNode("div", {
      "class": prefixCls
    }, [createVNode(DoubleLeftOutlined, {
      "class": cls('btn'),
      "onClick": () => handleDateChange('year', 'subtract')
    }, null), props.navUnit === 'month' && createVNode(LeftOutlined, {
      "class": cls('btn'),
      "onClick": () => handleDateChange('month', 'subtract')
    }, null), createVNode("div", {
      "class": cls('current-date')
    }, [displayDate.value]), props.navUnit === 'month' && createVNode(RightOutlined, {
      "class": cls('btn'),
      "onClick": () => handleDateChange('month', 'add')
    }, null), createVNode(DoubleRightOutlined, {
      "class": cls('btn'),
      "onClick": () => handleDateChange('year', 'add')
    }, null)]);
  }
});

export { calendarNavigator as default };