taro-ui-vue3/lib/calendar/controller/index.js

Taro UI Rewritten in Vue 3.0

import {h, defineComponent, computed} from "vue";
import {Picker, Text, View} from "@tarojs/components";
import dayjs from "dayjs/esm/index";
const AtCalendarController = defineComponent({
  name: "AtCalendarController",
  data: () => ({addGlobalClass: true}),
  props: {
    generateDate: {
      type: [String, Number],
      default: Date.now()
    },
    minDate: [String, Number, Date],
    maxDate: [String, Number, Date],
    hideArrow: Boolean,
    monthFormat: {
      type: String,
      default: "YYYY\u5E74MM\u6708"
    },
    onPreMonth: Function,
    onNextMonth: Function,
    onSelectDate: Function
  },
  setup(props) {
    const dayjsDate = computed(() => dayjs(props.generateDate));
    const dayjsMinDate = computed(() => !!props.minDate && dayjs(props.minDate));
    const dayjsMaxDate = computed(() => !!props.maxDate && dayjs(props.maxDate));
    const isMinMonth = computed(() => {
      return dayjsMinDate.value && dayjsMinDate.value.startOf("month").isSame(dayjsDate.value);
    });
    const isMaxMonth = computed(() => {
      return dayjsMaxDate.value && dayjsMaxDate.value.startOf("month").isSame(dayjsDate.value);
    });
    const minDateValue = computed(() => dayjsMinDate.value ? dayjsMinDate.value.format("YYYY-MM") : "");
    const maxDateValue = computed(() => dayjsMaxDate.value ? dayjsMaxDate.value.format("YYYY-MM") : "");
    const genArrowClass = (direction, disabled) => ({
      controller__arrow: true,
      [`controller__arrow--${direction}`]: true,
      "controller__arrow--disabled": disabled
    });
    return () => h(View, {
      class: "at-calendar__controller controller"
    }, {
      default: () => [
        !props.hideArrow && h(View, {
          class: genArrowClass("left", isMinMonth.value),
          onTap: props.onPreMonth.bind(this, isMinMonth.value)
        }),
        h(Picker, {
          mode: "date",
          fields: "month",
          end: maxDateValue.value,
          start: minDateValue.value,
          value: dayjsDate.value.format("YYYY-MM"),
          onChange: props.onSelectDate
        }, {
          default: () => [
            h(Text, {
              class: "controller__info"
            }, {default: () => dayjsDate.value.format(props.monthFormat)})
          ]
        }),
        !props.hideArrow && h(View, {
          class: genArrowClass("right", isMaxMonth.value),
          onTap: props.onNextMonth.bind(this, isMaxMonth.value)
        })
      ]
    });
  }
});
var controller_default = AtCalendarController;
export {
  controller_default as default
};