Question

我对angular2 ngb-datepicker宽度有疑问。我在我的应用程序中使用两个日期选择器。一个更大，另一个更小，我的问题是如何区分这两个并给出宽度并使其响应。

由于

Answer 1

我已将div标签添加到“ q-datepicker”类

<div class="q-datepicker position-relative w-100">
                <input
                    formControlName="From"
                    class=" form-control rounded-corner bg-white primary-font-color"
                    placement="bottom"
                    placeholder=""
                    [minDate]=""
                    ngbDatepicker
                    #d="ngbDatepicker"
                    readonly=""
                />
                <button
                    type="button"
                    (click)="d.toggle()"
                >
                    <i class="far fa-calendar-alt"></i>
                </button>
            </div>

然后在style.css中添加以下样式

.q-datepicker{
ngb-datepicker{
  left:0 !important;
  width: 350px;
  .ngb-dp-months{
    .ngb-dp-month{
      width: 100%;
      .ngb-dp-weekday{
        width: 2.5rem;
        margin-right: .5rem;
      }
      .ngb-dp-week{
        .ngb-dp-day{
            width: 2.5rem;
            margin-right: .5rem;
            div{
                width: 100%;
            }
        }
      }
    }
  }
}

}

Answer 2

您可以使用CSS在实例级别上进行任何样式设置-只需在ngb-datepicker节点上指定自定义类

<ngb-datepicker class="my-datepicker-1"/>

以这种方式进行设置后，您可以覆盖基础结构中的任何样式。这很容易解释（在浏览器中使用Inspect element。

您将看到类似的内容（CSS表示法）

.my-datepicker-1
  .ngb-dp-header //where you pick month and year
  .ngb-dp-content
    .ngb-dp-month 
      .ngb-dp-week.ngb-dp-weekdays //row with names of the weekdays
      .ngb-dp-week //row with days
        .ngb-dp-day

您几乎可以在那里设置所有样式。

例如，如果您希望日间单元更大（最初为2rem），则可以执行以下操作：

.my-datepicker-1 .ngb-dp-day {
  width: 3rem;
  height: 3rem;
  line-height: 3rem;
  text-align: center;
}

你很好。

如果您需要根据数据设置特定日期的样式，还可以向ng-template提供div.ngb-dp-day内应包含的内容的html处方，并以此方式提供其他样式钩子，以供以后在您的帐户中使用样式表。

在您的模板代码中：

<ngb-datepicker class="my-datepicker-1" [dayTemplate]="myDay" />

<ng-template #myDay let-custom="custom">
  <div class="my-day-1" [class.special-date]="isSpecialDay(date)" [class.custom]="custom">
    {{ date.day }}
  </div>
</ng-template>

并以这种方式绑定到控制器中的数据。如果isSpecialDay(date)在给定日期返回true，则您的div将在其类列表序列（special-date中获得<div class="my-day-1 special-date'>，您可以将其用于其他样式。

Answer 3

幸运的是，使用CSS是一块蛋糕。

1）设置您选择的宽度：

ngb-datepicker {
    width: 400px!important;
}

2）使日期选择器响应：

.ngb-dp-month {
    width: 100%;
}
.ngb-dp-weekdays,
.ngb-dp-week {
    justify-content: space-evenly;
}

Angular2 Ngb-datepicker宽度调整

3 个答案: