ShowEasyFrontEnd/FrontEnd/components/service/content/selectDate.vue

<template>
  <div class="tw-flex tw-flex-col-reverse md:tw-flex-row md:tw-items-center">
    <button
      class="select-date tw-transition tw-w-fit tw-btn-md tw-border tw-border-solid tw-border-secondary-default tw-text-secondary-default tw-bg-white tw-px-[16px] tw-py-[10px] tw-rounded-xl hover:tw-bg-secondary-default hover:tw-text-white">
      <client-only>
        <a-date-picker v-model="time1" placeholder="Select Time" :disabled-date="disabledDate" format="YYYY.MM.DD"
          @change="onChange" @ok="onOk">
          <span class="tw-text-secondary-default hover:tw-text-white tw-cursor-pointer">{{ $t("Select Date") }}</span>
        </a-date-picker>
      </client-only>
    </button>
    <!-- <a-range-picker v-model="time2">
      <span>
        {{ time2 ? time2 : "请选择" }}
      </span>
    </a-range-picker> -->
    <div v-show="time1" class="tw-text-secondary-dark tw-body-4 tw-font-medium tw-mb-[15px] md:tw-mb-0 md:tw-ml-[20px]">
      {{ $t("Selected: ") }}{{ startDate }}
    </div>
  </div>
</template>
<script>
import moment from "moment";
export default {
  props: {
    start: {
      type: String
    },
    end: {
      type: String
    }
  },
  data() {
    return {
      time1: undefined,
      time2: undefined,
    };
  },
  computed: {
    startDate() {
      return moment(this.time1).format("YYYY.MM.DD");
    },
    endDate() {
      return moment(this.time2).format("YYYY.MM.DD");
    },
  },
  methods: {
    onChange(value, dateString) {
      console.log("Selected Time: ", value);
      console.log("Formatted Selected Time: ", dateString);
      this.$emit('selected', dateString);
    },
    onOk(value) {
      console.log("onOk: ", value);
    },
    clearTime() {
      this.time1 = undefined;
      this.$emit('selected', '');
    },
    disabledDate(current) {
      // const today = new Date();
      // today.setHours(0, 0, 0, 0);
      const startDate = new Date(this.start);
      const endDate = new Date(this.end);
      startDate.setHours(0, 0, 0, 0);
      endDate.setHours(0, 0, 0, 0);
      endDate.setDate(endDate.getDate() + 1);
      return current < startDate || current > endDate;
    },
  },
};
</script>
<style lang="scss" scoped>
.select-date {
  &:hover {
    span {
      color: #fefefe !important;
    }
  }
}
</style>