angular - 在 Angular 4 中更改 NgbDatepicker 的大小

Question

出于某种我不知道的原因，我的 NgbDatePicker 比我想要的要小得多。它目前以以下尺寸显示:

...当我期望它以找到的示例中的尺寸显示时 here

我注意到一件奇怪的事情是，我的应用程序中日期选择器的以下部分在其 div 上设置了属性 _ngcontent-c0:

...同时，在网站上找到的示例的完全相同部分在其 div 上设置了属性 _ngcontent-c4。 这意味着它们的 div 甚至都不相同。这个相同的属性也用在几个 css 选择器中。

这是我使日期选择器出现的代码。我让它在单击输入字段时出现:

<form class="form-inline">
  <div class="form-group">
    <div class="input-group">
      <input readonly class="form-control rounded" (click)="d.toggle()" (clickOutside)="onDocumentClick($event, d)" (ngModelChange)="onModelChanged($event)" placeholder="yyyy-mm-dd"
             name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
      <svg><use xlink:href="sprite.svg#calendar"></use></svg>
    </div>
  </div>
</form>

这是配置 DatePicker 的组件的 ngOnInit() 代码:

    ngOnInit(): void {
    let today = new Date();
    let todayInDateStruct = {day: today.getUTCDate(), month: today.getUTCMonth() + 1, year: today.getUTCFullYear()};
    this.config.maxDate = this.maxDate || todayInDateStruct;
    this.config.minDate = this.minDate || {year: 1900, month: 1, day: 1};

    if (this.minDate$) {
        Rx.on(this, this.minDate$, (minDate: NgbDateStruct) => {
            if (minDate) {
                this.config.minDate = minDate;
            }
        });
    }

    /*
     The following line sets the first day of the week on the Calendar to Sunday instead of the default Monday.

     source: https://ng-bootstrap.github.io/#/components/datepicker/api
     */
    this.config.firstDayOfWeek = 7;
    }

有没有办法在不覆盖多个 NgbDatepicker 样式的情况下增加 NgbDatepicker 的大小？

Answer 1

我想你可以用这个。创建自定义模板，例如:

<ng-template #tpl let-date="date" let-currentMonth="currentMonth" let-selected="selected">
            <div class="day">{{ date.day }}
            </div>
 </ng-template>

然后设置 dayTemplate 属性:[dayTemplate]="tpl"

和 CSS:

.day {      
    text-align: center;
    padding: 7px;
    border-radius: 1rem;
    width: 100% !important;
  }
.ngb-dp-day{
    width: 100% !important;
    height: 100% !important;
  }
.ngb-dp-weekday{
   width: 100% !important;
   height: 100% !important;
}

填充是天与天之间的距离。因为dayview和weekday的默认css是“width: 2rem, height: 2rem”所以你需要通过添加“!important”来修改它。

将“封装:ViewEncapsulation.None”添加到您的组件中