在 vaadin 日期选择器中禁用整个月
Disable entire month in vaadin date picker
我正在尝试禁用 vaadin-date-picker 中所有月份的所有日期。在查看代码时,
我发现我可以通过在 vaadin-month-calendar.html#L75 . In that case the disabled date is faded, which is due to vaadin-month-calendar-styles.html#L119 中设置 disabled
来单独禁用日期,并且不能再 select 禁用日期。
同样,我做了以下操作,
<div id="days" part="days" disabled>
<template is="dom-repeat" items="[[_days]]">
<div part="date" today$="[[_isToday(item)]]" selected$="[[_dateEquals(item, selectedDate)]]" focused$="[[_dateEquals(item, focusedDate)]]" date="[[item]]" disabled$="[[!_dateAllowed(item, minDate, maxDate)]]" role$="[[_getRole(item)]]" aria-label$="[[_getAriaLabel(item)]]" aria-disabled$="[[_getAriaDisabled(item, minDate, maxDate)]]">[[_getDate(item)]]</div>
</template>
</div>
并添加了所需的样式:
[part="days"][disabled] {
color: var(--lumo-disabled-text-color);
}
在这种情况下,所有月份的所有日期都会淡化,但用户仍然可以 select 它们。我错过了什么吗?如何使禁用日期也 select 不可用?
好的,我找到了,只需要添加pointer-events: none;
我正在尝试禁用 vaadin-date-picker 中所有月份的所有日期。在查看代码时,
我发现我可以通过在 vaadin-month-calendar.html#L75 . In that case the disabled date is faded, which is due to vaadin-month-calendar-styles.html#L119 中设置 disabled
来单独禁用日期,并且不能再 select 禁用日期。
同样,我做了以下操作,
<div id="days" part="days" disabled>
<template is="dom-repeat" items="[[_days]]">
<div part="date" today$="[[_isToday(item)]]" selected$="[[_dateEquals(item, selectedDate)]]" focused$="[[_dateEquals(item, focusedDate)]]" date="[[item]]" disabled$="[[!_dateAllowed(item, minDate, maxDate)]]" role$="[[_getRole(item)]]" aria-label$="[[_getAriaLabel(item)]]" aria-disabled$="[[_getAriaDisabled(item, minDate, maxDate)]]">[[_getDate(item)]]</div>
</template>
</div>
并添加了所需的样式:
[part="days"][disabled] {
color: var(--lumo-disabled-text-color);
}
在这种情况下,所有月份的所有日期都会淡化,但用户仍然可以 select 它们。我错过了什么吗?如何使禁用日期也 select 不可用?
好的,我找到了,只需要添加pointer-events: none;