首页 > 解决方案 > Angular - 如何在 bsdaterangepicker 中突出显示今天的日期

问题描述

代码:

 <div class="col-lg-3 form-group">
 <label for="daterange"><strong> Date range</strong></label>
  <input type="text" name="daterange" autocomplete="off" bsDaterangepicker #datepickerMD="bsDaterangepicker"
  [bsConfig]="{ todayHighlight: true, rangeInputFormat : 'MM/DD/YYYY', dateInputFormat: 'MM/DD/YYYY', showWeekNumbers: false }"
  id="daterange" placeholder="Date Range" formControlName="daterangeapp" class="form-control"/>
   <div class="dr-input-group-append">
   <button class="calendar w-auto input-calendar-btn" (click)="datepickerMD.toggle()" type="button"
   [attr.aria-expanded]="datepickerMD.isOpen">
   <img tabindex="1" class="img-prop" src="assets/img/calendar_small.png" alt="Save"/>
   </button>
  </div>
 </div>

在此处输入图像描述

我得到了上面的日期范围选择但是,我还需要在选择器中突出显示今天的日期。尝试bsconfig参数 todayHighlight: true 它不起作用。

标签: htmlcssangularangular-material

解决方案


根据this Github question并基于this example,您应该能够根据自定义CSS类设置今天的日期.custom-today-class.

所以例如

.custom-today-class {
    background-color:red
}

您可以在这个分叉的示例中看到它是如何工作的。


推荐阅读