Disable entire month in vaadin date picker

问题: I am trying to disable all dates of all months in vaadin-date-picker. While looking through the code, I found that I can individually disable dates by setting disabled in v...

问题:

I am trying to disable all dates of all months in vaadin-date-picker. While looking through the code, I found that I can individually disable dates by setting disabled in vaadin-month-calendar.html#L75 . In that case the disabled date is faded, which is due to vaadin-month-calendar-styles.html#L119, and one can not select the disabled date any more.

Similarly, I have done the following,

<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>

And added the required style:

[part="days"][disabled] {
    color: var(--lumo-disabled-text-color);
}

In this case, all dates of all months are faded, but the user stiil can select them. Am I missing something? How to make disabled dates not selectable as well?


回答1:

Ok, I found it, just need to add pointer-events: none;

  • 发表于 2019-03-27 09:44
  • 阅读 ( 197 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除