Angular Ng引导日历，自定义布局

我使用ng bootstrap获得两个日历，可以从中选择一个范围。 代码如下：

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

{{date.day}

但是它有自己的布局，我不能访问HTML来根据我的需要更改它。 这是默认设置的外观：

我需要的是标题中的这个，两边都是：

有办法做到这一点吗？人们通常如何在ng引导上更改这些内容

感谢您的指导。谢谢大家!

该“键”覆盖该类。在您的情况下，您可以在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%;
    }

---

当然，您可以访问HTML（node_modules\@ng bootstrap\ng bootstrap\datepicker\datepicker-navigation.js和node_modules\@ng bootstrap\ng bootstrap\datepicker-navigation select.js）。不，说真的，你可以修改css以达到你想要的效果。请记住，您可以使用/deep/，例如ngb pagination/deep/.customselect{background:none；-webkit外观：visible；-moz外观：visible；外观：visible；}非常感谢您，但我需要将月份和年份作为选择选项。我也可以改变吗？我真的不确定如何使用它：|我修改了css，检查了我的答案谢谢，我在css中添加了这个，但在Chrome、IE和FireFox、Angular 5和Angular 4.3中没有任何改变。您有一个component.ts，其样式为：['./mycomponent.component.css']，还有mycomponent.component.css，其样式为前面的css。我不知道怎么了，我也不知道。从字面上看，这种风格没有任何表现。但我在inspect模式的元素中添加了这种外观，这不是我需要的。确实可以隐藏按钮和标题。但实际的月份不能仅仅通过将外观设置为插入符号来进行下拉。因为重点不仅仅是让这个月看起来像一个下拉列表。单击时，它们必须能够正常工作。我不知道如何更改默认设置。我添加了SVG背景

    :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%;
    }