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

这里我使用ng引导和angular 6作为内联日期选择器。在这里，我一直以编程方式设置日期，但问题是，当我设置截止日期的最后7天时，必须将日期从2018年9月2日显示到2018年9月17日。问题是：当我显示日期独立的日历时，“开始”日期显示在日历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);
  }
}

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

.html代码

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);
  }
}

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

最后7天
过去15天
过去30天
这个月

我的工作

stackblitz

URL

---

第一步是创建一个自定义模板day查看并添加一个类，您可以用不同的背景色显示某些日期

你的一天可以是

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

在你的

//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;
}

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

更新 我们可以使用equal、before和after来改进函数isselectedate。或者，如果要显示所有范围，请将函数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
}

---

你可以通过stackblitz发布吗？我用stackblitz查看我使用的是OneModel和TwoModel（不是我的fromDate ToDate）。此外，请参见NgbDateStruct中的日、月和年是数字（而不是字符串）。您需要更改计算变量OneModel和TwoModel的方法，并查看何时需要显示一个月或两个月。也可以查看我的更新答案