Question

在这里，我将ng bootstrap和angular 6用于内联日期选择器。在这里，我以编程方式设置日期，直到现在为止还可以，但是问题是，当我设置迄今为止的最后7天时，必须将其显示为日期02-9-2018和日期17-09-2018。这是问题所在：当我显示日期分开的日历时，“开始”日期显示在日历1上，“结束”日期显示在日历2上。

现在我要弄清楚的是，如何仅显示一个日历？我的意思是，如果过去7天或过去15天或一个月位于同一月份，则不必在另一个日历中显示。如果不是当前月份，则必须在不同的日历中显示2个日期。

下面是我的代码：

.ts代码

dateSelect(event, dpp, dpt) {

  var target = event.target || event.srcElement || event.currentTarget;
  var idAttr = target.attributes.id;
  var value = idAttr.nodeValue;

  if (value == 'seven') {
    var fromDate = {
      'year': "2018",
      'month': "9",
      'day': "10"
    };

    for (let property in fromDate) {
      if (fromDate.hasOwnProperty(property)) {
        fromDate[property] = +fromDate[property];
      }
    }
    this.OneModel = fromDate;
    dpp.navigateTo(this.OneModel);

    this.TwoModel = this.calendar.getToday();
    dpt.navigateTo(this.TwoModel);
    console.log(this.OneModel);
  }

  if (value == 'fifteen') {
    var fromDate = {
      'year': "2018",
      'month': "9",
      'day': "02"
    };

    for (let property in fromDate) {
      if (fromDate.hasOwnProperty(property)) {
        fromDate[property] = +fromDate[property];
      }
    }
    this.OneModel = fromDate;
    dpp.navigateTo(this.OneModel);

    this.TwoModel = this.calendar.getToday();
    dpt.navigateTo(this.TwoModel);
    console.log(this.OneModel);
  }

  if (value == 'thirty') {
    var fromDate = {
      'year': "2018",
      'month': "9",
      'day': "18"
    };

    for (let property in fromDate) {
      if (fromDate.hasOwnProperty(property)) {
        fromDate[property] = +fromDate[property];
      }
    }
    this.OneModel = fromDate;
    dpp.navigateTo(this.OneModel);

    this.TwoModel = this.calendar.getToday();
    dpt.navigateTo(this.TwoModel);
    console.log(this.OneModel);
  }

  if (value == 'month') {
    var fromDate = {
      'year': "2018",
      'month': "9",
      'day': "01"
    };

    for (let property in fromDate) {
      if (fromDate.hasOwnProperty(property)) {
        fromDate[property] = +fromDate[property];
      }
    }
    this.OneModel = fromDate;
    dpp.navigateTo(this.OneModel);

    this.TwoModel = this.calendar.getToday();
    dpt.navigateTo(this.TwoModel);
    console.log(this.OneModel);
  }
}

.html代码

<ngb-datepicker #dpp [(ngModel)]="OneModel" (navigate)="dates = $event.next"></ngb-datepicker>
<ngb-datepicker #dpt [(ngModel)]="TwoModel" (navigate)="datess = $event.next"></ngb-datepicker>

<button type="button" class="btn btn-primary btn-space" (click)="dateSelect($event,dpp,dpt)" id="seven">Last 7 Days</button>
<button type="button" class="btn btn-primary btn-space" (click)="dateSelect($event,dpp,dpt)" id="fifteen">Last 15 Days</button>
<button type="button" class="btn btn-primary btn-space" (click)="dateSelect($event,dpp,dpt)" id="thirty">Last 30 Days</button>
<button type="button" class="btn btn-primary btn-space" (click)="dateSelect($event,dpp,dpt)" id="month">This Month</button>

我的工作stackblitz URL

angular-sfngdu

Answer 1

第一步是创建自定义模板天，请参见https://ng-bootstrap.github.io/#/components/datepicker/examples#customday并添加一个类，以便您可以用不同的背景色显示几天。

您的customDay可以像

<ng-template #customDay let-date="date" let-currentMonth="currentMonth" let-selected="selected" let-disabled="disabled" let-focused="focused">
  <!--see that you add a class "selected" is a function return true-->
  <span class="custom-day" [class.selected]="isSelectedDate(date)" [class.focused]="focused"
        [class.bg-primary]="selected" [class.fade]="date.month !== currentMonth" [class.text-muted]="disabled">
    {{ date.day }}
  </span>
</ng-template>

在您的.css中

.custom-day {
      text-align: center;
      padding: 0.185rem 0.25rem;
      border-radius: 0.25rem;
      display: inline-block;
      width: 2rem;
      line-height: 2rem
    }
    .custom-day:hover, .custom-day.focused {
      background-color: #e6e6e6;
    }
    .fade {
      color:Gray;
    }
    .selected {
      background-color:firebrick;
      color: white;
    }

在您的.ts

中

//This is the function that make a date change the class
isSelectedDate(date:any)
{
  return this.fromDate &&this.toDate? 
     (date.day==this.fromDate.day && date.year==this.fromDate.year && date.month==this.fromDate.month) || 
          (date.day==this.toDate.day && date.year==this.toDate.year && date.month==this.toDate.month):false;
}

然后，您必须在显示一个或两个日历时进行计算

更新我们可以在之前和之后使用相等的值来改进isSelectedDate函数。或者，如果要显示所有范围，则将函数isSelectedDate替换为isSelectedDayRange

isSelectedDate(date:any)
{
  return this.OneModel &&this.TwoModel? 
           date.equals(this.OneModel) || date.equals(this.TwoModel)
:false;
}
//if you want to "select" a range, you can call to this function 
isSelectedDayRange(date:any)
{
    return this.OneModel && this.TwoModel?
       date.equals(this.OneModel) || date.equals(this.TwoModel) || (date.after(this.OneModel) && date.before(this.TwoModel))
    :false
}

无法使用ng bootstrap和angular 6在同一日历中设置日期

1 个答案: