Question

我正在使用ng bootstrap获取两个日历，我可以从中选择一个范围。这是代码：

<ngb-datepicker #dp ngModel (ngModelChange)="onDateChange($event)" [displayMonths]="2" [dayTemplate]="t">

<ng-template #t let-date="date" let-focused="focused">
    <span class="custom-day"
          [class.focused]="focused"
          [class.range]="isFrom(date) || isTo(date) || isInside(date) || isHovered(date)"
          [class.faded]="isHovered(date) || isInside(date)"
          (mouseenter)="hoveredDate = date"
          (mouseleave)="hoveredDate = null">
      {{ date.day }}
    </span>
  </ng-template>

但是它有自己的布局，我无法访问HTML来根据我的需要进行更改。这是默认的样子：

Default Calendar Layout

我需要的是头部中的这个，双方都是这样：

Custom Layout

有办法做到这一点吗？人们通常如何在ng-bootstrap上改变这些事情？

感谢任何指导。谢谢！

Answer 1

＆＃34; key＆＃34;覆盖了这个类。在您的情况下，您可以在component.css中使用

    :host /deep/ ngb-datepicker .custom-select{
      -webkit-appearance: caret;
      -moz-appearance: caret;
      appearance: caret;
      background:none;
    }

    :host /deep/ ngb-datepicker .btn-link {
        display: none;
    }        
//If we surrender about "caret" I suppose we can add this css
    :host /deep/ ngb-datepicker .btn-link {
        display: none;
    }

    :host /deep/ ngb-datepicker ngb-datepicker-navigation-select {
        width: 100% !important;
    }
    :host /deep/ ngb-datepicker .custom-select {
        background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath stroke='%23333' stroke-width='.5' fill='none' d='M 1 1 L 2.5 5 L 4 1'/%3E%3C/svg%3E") no-repeat right .75rem center
        width: 48% !important;
        margin-left: 1%;
    }

Ng Bootstrap日历，自定义布局

1 个答案: