Angular2 Ngb-datepicker 宽度调整答案

【问题标题】：Angular2 Ngb-datepicker width adjustmentAngular2 Ngb-datepicker 宽度调整
【发布时间】：2018-01-11 22:50:40
【问题描述】：

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

谢谢

【问题讨论】：

标签： angular bootstrap-datepicker

【解决方案1】：

幸运的是，使用 CSS 是小菜一碟。

1) 设置您选择的宽度：

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

2) 使日期选择器响应：

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

【讨论】：

【解决方案2】：

我添加到 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%;
            }
        }
      }
    }
  }
}

}

【讨论】：

【解决方案3】：

您可以使用 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 在其类列表序列 (<div class="my-day-1 special-date'>) 中获得 special-date，您可以将其用于额外的样式。

【讨论】：