Element Date仅允许选择本月或者上月

91 阅读2分钟

我们面对的是一段日期选择器的配置代码,它采用了特定的日期格式,并对日期选择范围进行了限定。代码中的dateMoon大概率是自定义的日期选择器类型,valueFormat将日期值格式设定为yyyyMM,即年份与月份的组合形式。而pickerOptions中的disabledDate函数则负责掌控哪些日期可供选择,哪些日期被禁用。

图片.png

整体结构


{

  label: '结算年月',

  prop: 'date',

  type: 'dateMoon',

  valueFormat: 'yyyyMM',

  pickerOptions: {

    disabledDate: (time) => {

      // 具体的日期禁用逻辑

    }

  }

}

此段代码是一个对象,囊括了日期选择器的相关配置信息。label为显示的标签内容,prop可能是用于数据绑定的属性名,type指明日期选择器的类型,valueFormat规定日期值的格式,pickerOptions则是日期选择器的额外配置项,其中disabledDate是一个函数,用于判定每个日期是否应被禁用。

disabledDate函数逻辑


disabledDate: (time) => {

  const current = moment(time);

  // 只允许选择上一个月的日期

  const isAfterCurrentMonth = moment().startOf('month').isBefore(current);

  // 禁用上月之前的日期

  const isBeforeLastMonth = moment().subtract(1, 'month').startOf('month').isAfter(current);

  return isAfterCurrentMonth || isBeforeLastMonth;

}

moment(time):借助moment库将传入的time参数转化为moment对象,以便后续进行日期操作。

moment().startOf('month').isBefore(current)

moment().startOf('month'):获取当前月份的起始日期(即第一天)。

isBefore(current):判断当前月份的第一天是否在current日期之前。若为真,则表明current日期处于当前月份或之后,将isAfterCurrentMonth设为true

moment().subtract(1,'month').startOf('month').isAfter(current)

moment().subtract(1,'month').startOf('month'):获取上一个月的起始日期(即第一天)。

isAfter(current):判断上一个月的第一天是否在current日期之后。若为真,则表明current日期在上一个月之前,将isBeforeLastMonth设为true

return isAfterCurrentMonth || isBeforeLastMonth:若current日期处于当前月份或之后,或者在上一个月之前,就返回true,意味着该日期应被禁用。唯有当日期属于上一个月时,用户才能够选择。