meetingTimePicker.js 8.86 KB
var currentDate = new Date();
const weekList = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
const durationList = [{ value: 60, label: '1小时' }, { value: 120, label: '2小时' }, { value: 30, label: '30分钟' }];
const timeData = generateDate(365);
const timeHour = generateTime(24);
const timeMin = generateTime(60);

function padZero(val) {
  return ("00" + val).slice(-2);
}
// 生成小时和分钟
function generateTime(max) {
  const time = [];
  for (let i = 0; i < max; i++) {
    time.push(padZero(i))
  }
  return time;
}
// 生成年月日周
function generateDate(max) {
  const timeData = [];
  for (let i = max; i > 0; i--) {
    timeData.push(GetDateStr(-i));
  }
  for (let i = 0; i < max; i++) {
    timeData.push(GetDateStr(i));
  }
  return timeData
}
function GetDateStr(AddDayCount) {
  var time = new Date();
  time.setDate(time.getDate() + AddDayCount);
  const res = getYMDWHMIN(time);
  return res.y + '年' + res.m + "月" + res.d + "日 " + res.w;
}
// 获取年月日周时分
function getYMDWHMIN(date) {
  const y = date.getFullYear();
  const m = padZero(date.getMonth() + 1);
  const d = padZero(date.getDate());
  const w = weekList[date.getDay()];
  const h = padZero(date.getHours());
  const min = padZero(date.getMinutes());
  return {
    y, m, d, w, h, min
  }
}
// 时间格式转化为03月01日 14:00
function getTabShowDateByDate(date) {
  const res = getYMDWHMIN(date);
  return res.m + "月" + res.d + "日 " + res.h + ':' + res.min;
}
function getdhmByPickValue(pickValue) {
  const d = timeData[pickValue[0]];
  const h = timeHour[pickValue[1]];
  const m = timeMin[pickValue[2]];
  return { d, h, m }
}
function getTabShowDateByPickValue(pickValue) {
  const { d, h, m } = getdhmByPickValue(pickValue);
  const time = `${d.slice(5, 10)} ${h}:${m}`;
  const weekDay = d.slice(-2);
  return { time, weekDay }
}
// 根据column值获取标准时间格式 2019/2/2 16:00
function getPostTimeByPickValue(pickValue) {
  const { d, h, m } = getdhmByPickValue(pickValue);
  const newD = d.slice(0, 10).replace('年', '/').replace('月', '/').replace('日', '/');
  return newD + ' ' + h + ':' + m
}
// 将周几转换为今天,明天, 昨天
function getTabShowWeekByDate(futureData) {
  const date = new Date(futureData);
  let week = '今天';
  //同年同月
  if (currentDate.getFullYear() == date.getFullYear() &&
    currentDate.getMonth() == date.getMonth()
  ) {
    if (currentDate.getDate() == date.getDate()) {
      week = '今天'
    } else if (date.getDate() - currentDate.getDate() == 1) {
      week = '明天'
    } else if (currentDate.getDate() - date.getDate() == 1) {
      week = '昨天'
    } else {
      week = weekList[date.getDay()]
    }
  } else {
    week = weekList[date.getDay()]
  }
  return week;
}

// 根据开始时间和持续时间计算结束时间 2019/2/2 16:00
function getEndTime(startTime, duration) {
  let newDate = new Date(startTime);
  var min = newDate.getMinutes();
  newDate.setMinutes(min + duration);
  const res = getYMDWHMIN(newDate);
  return res.y + '/' + res.m + '/' + res.d + ' ' + res.h + ':' + res.min;
}
// 获取结束至时间的显示 16:00
function getDurationEndTime(startTime, duration) {
  return getEndTime(startTime, duration).slice(-5);
}
// 获取持续时间 {value,lable,index}
function getDuration(startDate, endDate) {
  const time = endDate.getTime() - startDate.getTime();
  const min = time / 1000 / 60;
  let duration = null;
  durationList.forEach((it, index) => {
    if (it.value == min) {
      it.index = index;
      duration = it
    }
  })
  return duration
}
// 根据持续时间的显示值获取实际分钟数
function getDurationValue(durationLable) {
  let value = 120;
  durationList.forEach(it => {
    if (it.label == durationLable) {
      value = it.value
    }
  });
  return value
}
// 获取时间格式的pick value用于pick column回显
function getPickerValue(date) {
  const res = getYMDWHMIN(date);
  const pickerValue = [timeData.indexOf(res.y + "年" + res.m + "月" + res.d + "日 " + res.w), timeHour.indexOf(res.h), timeMin.indexOf(res.min)];
  return pickerValue
}
Component({
  mixins: [],
  data: {
    currentTab: 'start',
    timeData: timeData,
    timeHour: timeHour,
    timeMin: timeMin,
    durationList: durationList,
    isEndTimeCustom: false,
    //用于pick column回显
    startPickValue: [],
    endPickValue: [],
    endDurationPickValue: [1],
    // 当前 pick column回显
    pickValue: [],
    //开始、结束时间tab数据
    startWeekDay: '今天',
    startTime: '',
    endWeekDay: '今天',
    endTime: '',
    //持续结束时间tab数据
    duration: '2小时',
    //已选择的标准时间格式数据
    postStartTime: '',
    postEndTime: '',
    durationEndTime: '',
    error: ''
  },
  props: {
  },
  didMount() {
    this.setInitialValue();
  },
  didUpdate() {
  },
  didUnmount() { },
  methods: {
    //设置初始值
    setInitialValue() {
      let startDate = new Date();
      //结束日期默认+2小时
      let endDate = new Date();
      var hour = endDate.getHours();
      endDate.setHours(hour + 2);
      // 赋值
      if (this.props.startTime) {
        startDate = new Data(this.props.startTime);
      }
      if (this.props.endTime) {
        endDate = new Data(thia.props.endTime);
      }
      //开始和结束时间,持续时间赋值
      this.setData({
        startPickValue: getPickerValue(startDate),
        startTime: getTabShowDateByDate(startDate),
        postStartTime: startDate,
        pickValue: getPickerValue(startDate),
        endPickValue: getPickerValue(endDate),
        endTime: getTabShowDateByDate(endDate),
        postEndTime: endDate
      });
      // 如果持续时间不在范围内,需要改变默认显示结束时间的方式
      const duration = getDuration(startDate, endDate);
      if (duration) {
        this.setData({
          duration: duration.label,
          durationEndTime: getDurationEndTime(startDate, duration.value),
          endDurationPickValue: [duration.index]
        })
      } else {
        this.setData({
          isEndTimeCustom: true
        })
      }
    },
    onChange(e) {
      const pickValue = e.detail.value;
      const timeData = getTabShowDateByPickValue(pickValue);
      //改变开始时间,改变持续时间的结束时间
      if (this.data.currentTab === 'start') {
        const postStartTime = getPostTimeByPickValue(pickValue);
        this.setData({
          startTime: timeData.time,
          startWeekDay: getTabShowWeekByDate(postStartTime),
          startPickValue: pickValue,
          postStartTime
        });
        if (!this.data.isEndTimeCustom) {
          this.setData({
            durationEndTime: getDurationEndTime(postStartTime, getDurationValue(this.data.duration))
          })
        }
      }
      // 改变结束时间,这里结束时间和持续时间互不影响
      else if (this.data.currentTab === 'end') {
        const postEndTime = getPostTimeByPickValue(pickValue);
        if (this.data.isEndTimeCustom) {
          this.setData({
            endTime: timeData.time,
            endWeekDay: getTabShowWeekByDate(postEndTime),
            endPickValue: pickValue,
            postEndTime
          });
        } else {
          const durationData = durationList[pickValue[0]];
          this.setData({
            duration: durationData.label,
            durationEndTime: getDurationEndTime(this.data.postStartTime, durationData.value),
            endDurationPickValue: pickValue,
            postEndTime: getEndTime(this.data.postStartTime, durationData.value)
          });
        }
      }
      this.checkValue(this.data.postStartTime, this.data.postEndTime);
    },
    changeTab(e) {
      const currentTab = e.currentTarget.id;
      //pick coulum 回显
      if (currentTab === 'end' && !this.data.isEndTimeCustom) {
        return this.setData({
          currentTab,
          pickValue: this.data.endDurationPickValue
        });
      }
      this.setData({
        currentTab,
        pickValue: this.data[`${currentTab}PickValue`]
      });
    },
    changeWay() {
      this.setData({
        isEndTimeCustom: true
      });
      //如果在end tab 切换, 需要设置结束时间的pick column回显
      if (this.data.currentTab == 'end') {
        this.setData({
          pickValue: this.data.endPickValue
        });
      }
    },
    checkValue(postStartTime, postEndTime) {
      if (new Date(postEndTime).getTime() <= new Date(postStartTime).getTime()) {
        this.setData({
          error: '开始时间小于结束时间'
        })
        return false;
      } else {
        this.setData({
          error: ''
        })
        return true
      }
    },
    complete() {
      const { postStartTime, postEndTime } = this.data;
      if (this.checkValue(postStartTime, postEndTime)) {
        this.props.onComplete({
          startTime: postStartTime,
          endTime: postEndTime
        })
      }
    }
  },
});