如何为bs-daterangepicker选中区间内的月末日期添加圆角样式

实现方案 #

纯CSS兼容方案（推荐，兼容Chrome 105+、Firefox 121+、Safari 15.4+） #

直接在现有.wpm-datepicker .bs-datepicker-body选择器内新增以下样式，即可实现月末日期处于选中区间时的右侧圆角效果：

/* 匹配当月最后一天的单元格，处于选中区间且不是区间结束点时，添加右侧圆角 */
table td:has(span.in-range:not(.select-end):not(.is-other-month)):has(+ td span.is-other-month) span::before {
  border-radius: 0 16px 16px 0;
  right: 4px !important;
}

/* 可选补充：匹配当月第一天的单元格，处于选中区间且不是区间起始点时，添加左侧圆角 */
table td:has(span.in-range:not(.select-start):not(.is-other-month)):has(td:last-child span.is-other-month + &) span::before {
  border-radius: 16px 0 0 16px;
  left: 8px !important;
}

低版本浏览器兼容方案 #

如果需要兼容不支持:has()伪类的浏览器，可通过JS动态加类实现：

1. 先在样式表中添加自定义类样式：

.wpm-datepicker .month-end-in-range span::before {
  border-radius: 0 16px 16px 0 !important;
  right: 4px !important;
}

2. 在组件中监听视图变化，动态为符合条件的单元格加类：

import { ViewChild, AfterViewChecked } from '@angular/core';
import { BsDaterangepickerInlineComponent } from 'ngx-bootstrap/datepicker';

export class YourComponent implements AfterViewChecked {
  @ViewChild(BsDaterangepickerInlineComponent) datepicker: BsDaterangepickerInlineComponent;
  bsRangeValue: Date[];
  bsConfig = {
    containerClass: "wpm-datepicker",
  };

  ngAfterViewChecked() {
    this.addMonthEndRoundedStyle();
  }

  addMonthEndRoundedStyle() {
    const cells = document.querySelectorAll('.wpm-datepicker table.days td');
    cells.forEach((cell, index) => {
      const dateSpan = cell.querySelector('span');
      if (!dateSpan) return;
      // 校验规则：当月日期、处于选中区间、不是区间结束点、下一个单元格为次月日期
      const isCurrentMonth = !dateSpan.classList.contains('is-other-month');
      const isInRange = dateSpan.classList.contains('in-range');
      const isSelectEnd = dateSpan.classList.contains('select-end');
      const nextCell = cells[index + 1];
      const nextIsOtherMonth = nextCell?.querySelector('span')?.classList.contains('is-other-month');
      
      cell.classList.toggle('month-end-in-range', isCurrentMonth && isInRange && !isSelectEnd && nextIsOtherMonth);
    });
  }
}

3. 给模板组件添加模板引用：

<bs-daterangepicker-inline
  #datepicker
  [bsConfig]="bsConfig"
  [bsValue]="bsRangeValue"
></bs-daterangepicker-inline>

两种方案均可直接适配现有样式规则，无需修改原有代码。

内容的提问来源于stack exchange，提问作者Definkle