在Angular 4

Question

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

...当我希望它显示在找到的here

示例中的大小时

我注意到一个奇怪的事情是我的应用程序中的datepicker的以下部分在其div上设置了属性_ngcontent-c0：

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

这是我使用datepicker的代码。单击输入字段时显示：

<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 ”