LocalLivingServicesUniapp/components/dengrq-datetime-picker/dateSelector/index.js

import DateTimePicker from '../dateTimePicker/index.vue';
import DateUtil from '../dateTimePicker/dateUtil';
import { DATE_TYPES } from '../dateTimePicker/constant';

export default {
  components: {
    DateTimePicker
  },
  data() {
    return {
      showStartDatePicker: false,
      showEndDatePicker: false,
      startDate: '',
      endDate: '',
      activeDate: 'startDate' ,// 正在处理哪一个日期值，startDate/endDate
			dateList:[{
				name:'当日',
				type:'day'
			},
			{
				name:'本月',
				type:'month'
			},
			{
				name:'本年',
				type:'year'
			}],
			currentIndex:null,
			isYear:false
    };
  },
  props: {
    // 日期筛选模式，1：年月日（默认），2：年月，3：年，4：年月日时分秒，5：时分秒，6：时分
    mode: {
      type: Number,
      default: DATE_TYPES.YMD
    },
    title:{
			type:String,
			default:'选择营业时段'
		},
		isYear:{
			type:Boolean,
			default:false
		},
    // 默认开始日期
    defaultStartDate: {
      type: String,
      default: ''
    },
    // 默认结束日期
    defaultEndDate: {
      type: String,
      default: ''
    },
    // 可选的最小日期
    minDate: {
      type: String,
      default: ''
    },
    // 可选的最大日期
    maxDate: {
      type: String,
      default: ''
    }
  },
  
  watch: {
    mode() {
      // 筛选模式更换时清空一下数据
      this.resetData();
    },
    startDate() {
      this.$emit('onChange', {
        startDate: this.startDate,
        endDate: this.endDate
      });
    },
    endDate() {
      this.$emit('onChange', {
        startDate: this.startDate,
        endDate: this.endDate
      });
    },
    defaultStartDate: {
      handler(defaultStartDate) {
        if (!defaultStartDate) {
          return;
        }

        if (this.mode == DATE_TYPES.HMS || this.mode == DATE_TYPES.HM) {
          console.error('时分秒/时分模式不支持设置默认开始时间');
          return;
        }

        if (DateUtil.isBefore(defaultStartDate, this.minDate)) {
          console.warn(
            `默认开始日期不可小于最小可选日期，已把默认开始日期设为最小可选日期。默认开始日期：${defaultStartDate}，最小可选日期：${this.minDate}`
          );
          this.startDate = this.getModeFormatDateString(this.minDate);
        } else {
          this.startDate = this.getModeFormatDateString(defaultStartDate);
        }
      },
      immediate: true
    },
    defaultEndDate: {
      handler(defaultEndDate) {
        if (!defaultEndDate) {
          return;
        }

        if (this.mode == DATE_TYPES.HMS || this.mode == DATE_TYPES.HM) {
          console.error('时分秒/时分模式不支持设置默认结束时间');
          return;
        }

        if (DateUtil.isAfter(defaultEndDate, this.maxDate)) {
          console.warn(
            `默认结束日期不可大于最大可选日期，已把默认结束日期设为最大可选日期。默认结束日期：${defaultEndDate}，最大可选日期：${this.maxDate}`
          );
          this.endDate = this.getModeFormatDateString(this.maxDate);
        } else {
          this.endDate = this.getModeFormatDateString(defaultEndDate);
        }
      },
      immediate: true
    },
    minDate(val) {
      if ((val && this.mode == DATE_TYPES.HMS) || this.mode == DATE_TYPES.HM) {
        console.error('时分秒/时分模式不支持设置最小可选时间');
        return;
      }
    },
    maxDate(val) {
      if ((val && this.mode == DATE_TYPES.HMS) || this.mode == DATE_TYPES.HM) {
        console.error('时分秒/时分模式不支持设置最大可选时间');
        return;
      }
    }
  },
  methods: {
		selectYear(item,index){
			this.currentIndex = index
			//今日
			if(item.type == 'day'){
				// 获取当前时间
				const now = new Date();
				
				// 获取今日的起始时间（00:00:00）
				const startOfDay = new Date(now);
				startOfDay.setHours(0, 0, 0, 0); // 设置为 00:00:00.000
				
				// 获取今日的结束时间（23:59:59）
				const endOfDay = new Date(now);
				endOfDay.setHours(23, 59, 59, 999); // 设置为 23:59:59.999
				
				// 格式化输出
				const formatDate = (date) => {
				  const year = date.getFullYear();
				  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需要 +1
				  const day = String(date.getDate()).padStart(2, '0');
				  const hours = String(date.getHours()).padStart(2, '0');
				  const minutes = String(date.getMinutes()).padStart(2, '0');
				  const seconds = String(date.getSeconds()).padStart(2, '0');
				  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				};
				
				console.log("今日起始时间:", formatDate(startOfDay)); // 例如：2023-10-05 00:00:00
				console.log("今日结束时间:", formatDate(endOfDay));   // 例如：2023-10-05 23:59:59
				this.startDate = formatDate(startOfDay)
				this.endDate = formatDate(endOfDay)
			}
			//本月
			else if(item.type == 'month'){
				// 获取当前时间
				const now = new Date();
				
				// 获取本月的第一天（00:00:00）
				const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0, 0);
				
				// 获取本月的最后一天（23:59:59）
				const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59, 999);
				
				// 格式化日期为 YYYY-MM-DD HH:mm:ss
				const formatDate = (date) => {
				  const year = date.getFullYear();
				  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需要 +1
				  const day = String(date.getDate()).padStart(2, '0');
				  const hours = String(date.getHours()).padStart(2, '0');
				  const minutes = String(date.getMinutes()).padStart(2, '0');
				  const seconds = String(date.getSeconds()).padStart(2, '0');
				  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				};
				
				console.log("本月起始时间:", formatDate(startOfMonth)); // 例如：2023-10-01 00:00:00
				console.log("本月结束时间:", formatDate(endOfMonth));   // 例如：2023-10-31 23:59:59
				this.startDate = formatDate(startOfMonth)
				this.endDate = formatDate(endOfMonth)
			}
			//今年
			else if(item.type == 'year'){
				// 获取当前时间
				const now = new Date();
				
				// 获取今年的第一天（00:00:00）
				const startOfYear = new Date(now.getFullYear(), 0, 1, 0, 0, 0, 0); // 月份从 0 开始，0 表示 1 月
				
				// 获取今年的最后一天（23:59:59）
				const endOfYear = new Date(now.getFullYear(), 11, 31, 23, 59, 59, 999); // 11 表示 12 月
				
				// 格式化日期为 YYYY-MM-DD HH:mm:ss
				const formatDate = (date) => {
				  const year = date.getFullYear();
				  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需要 +1
				  const day = String(date.getDate()).padStart(2, '0');
				  const hours = String(date.getHours()).padStart(2, '0');
				  const minutes = String(date.getMinutes()).padStart(2, '0');
				  const seconds = String(date.getSeconds()).padStart(2, '0');
				  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				};
				
				console.log("今年起始时间:", formatDate(startOfYear)); // 例如：2023-01-01 00:00:00
				console.log("今年结束时间:", formatDate(endOfYear));   // 例如：2023-12-31 23:59:59
				this.startDate = formatDate(startOfYear)
				this.endDate = formatDate(endOfYear)
			}
			
		},
    open(){
      this.$refs.popup.open()
    },
    onTapStartDate() {
      this.showEndDatePicker = false;
      if (!this.startDate) {
        this.startDate = this.getModeFormatDateString(new Date());
      }
      this.activeDate = 'startDate';
      this.showStartDatePicker = true;
    },
    onTapEndDate() {
      this.showStartDatePicker = false;
      if (!this.endDate) {
        this.endDate = this.startDate;
      }
      this.activeDate = 'endDate';
      this.showEndDatePicker = true;
    },
    onChangeStartDate(date) {
      this.startDate = date;
    },
    onChangeEndDate(date) {
      this.endDate = date;
    },
    validateInput() {
      if (!this.startDate) {
        uni.showToast({
          title: '请选择开始时间',
          icon: 'none'
        });
        return false;
      } else if (!this.endDate) {
        uni.showToast({
          title: '请选择结束时间',
          icon: 'none'
        });
        return false;
      } else if (DateUtil.isAfter(this.startDate, this.endDate)) {
        uni.showToast({
          title: '结束时间不能小于开始时间',
          icon: 'none'
        });
        return false;
      }
      return true;
    },
    onCancel() {
      this.resetData();
			this.$emit('cut')
    },
    onConfirm() {
      if (this.validateInput()) {
        this.$emit('onSubmit', {
          startDate: this.startDate,
          endDate: this.endDate
        });
        this.showStartDatePicker = false;
        this.showEndDatePicker = false;
        this.$refs.popup.close()
      }
    },
    resetData() {
      this.startDate = '';
      this.endDate = '';
      this.activeDate = 'startDate';
      this.showStartDatePicker = false;
        this.$refs.popup.close()
        this.showEndDatePicker = false;
        this.$refs.popup.close()

    },
    // 返回对应日期模式的时间字符串
    getModeFormatDateString(date) {
      let fmt = 'YYYY-MM-DD';
      switch (this.mode) {
        case DATE_TYPES.YM:
          fmt = 'YYYY-MM';
          break;
        case DATE_TYPES.Y:
          fmt = 'YYYY';
          break;
        case DATE_TYPES['YMD-HMS']:
          fmt = 'YYYY-MM-DD HH:mm:ss';
          break;
        case DATE_TYPES.HMS:
          fmt = 'HH:mm:ss';
          break;
        case DATE_TYPES.HM:
          fmt = 'HH:mm';
          break;
        default:
          break;
      }
      return DateUtil.formatDate(date, fmt);
    }
  }
};