Css Angular Datepicker 更改日期范围 Select 样式

 RangeClass: MatCalendarCellClassFunction<Moment> = (cellDate, view) => {
        if (view === "month") {
            const date = cellDate.toDate();
            return date >= mystart && date <= myend ? "range-class" : "";
        }

        return "";
    };

.range-class {
  background: white;
  border: 3px solid orange;
}

<mat-datepicker [dateClass]="RangeClass" #picker></mat-datepicker>

.mat-calendar-body-selected {
  background-color: black;
  color: #fff;
}
.mat-calendar-body-in-range::before {
  background: #cccccc;
}

.mat-calendar-body-in-range .mat-calendar-body-cell-content {
  border: 3px solid orange;
  border-radius: 0;
  border-left-width: 0;
  border-right-width: 0;
}

.mat-calendar-body-range-end > .mat-calendar-body-selected {
  background-color: transparent;
  border: 3px solid orange;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left-width: 0;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}
.mat-calendar-body-range-start > .mat-calendar-body-selected {
  background-color: transparent;
  border: 3px solid orange;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  border-right-width: 0;
}

Css相关问答推荐

为什么我不能编辑垫按钮填充？

如何在Ionic上更改输入的浮点数名称 colored颜色 ？

可折叠/可展开的数据表行：如何使Shadcn数据表中的可折叠内容全宽？

如何在CSS中创建水平/垂直对称的虚线边框？

为什么删除 AnimatePresence framer.div 时会出现轻微卡顿？

在 CSS 中，如何用破折号填充段落中每一行的空白区域？

使用框架时样式冲突导致的 CSS 网格布局问题

将框架放入 bootstrap 模式的正确方法是什么？

是否可以对 CSS 网格中重复和可包装的列使用固定的最小和最大宽度？

左右卡片的 OwlCarousel 导航：react js

在 CSS 中相对于另一个元素定位一个元素

flexbox 布局中的 Padding-bottom/top

是否可以删除悬停在链接上时出现的手形光标？ (或将其设置为普通指针)

在响应式设计中指定 HTML 文本中的首选换行点

在固定高度的输入字段中垂直对齐文本而不显示：表格或填充？

绝对位置和溢出：隐藏

使用 Twitter Bootstrap 使页脚粘在页面底部

让 div 占据 100% 身体高度，减go 固定高度的页眉和页脚

我应该在我的 Bootstrap 项目中使用 normalize.css 吗？

如何复制 iOS 上固定的后台附件