我们面对的是一段日期选择器的配置代码,它采用了特定的日期格式,并对日期选择范围进行了限定。代码中的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
,意味着该日期应被禁用。唯有当日期属于上一个月时,用户才能够选择。