我们面对的是一段日期选择器的配置代码,它采用了特定的日期格式,并对日期选择范围进行了限定。代码中的dateMoon大概率是自定义的日期选择器类型,valueFormat将日期值格式设定为yyyyMM,即年份与月份的组合形式。而pickerOptions中的disabledDate函数则负责掌控哪些日期可供选择,哪些日期被禁用。
整体结构
{
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,意味着该日期应被禁用。唯有当日期属于上一个月时,用户才能够选择。