Невозможно установить даты в одном и том же календаре, используя ng bootstrap и angular 6 - PullRequest
Новая
       7

Невозможно установить даты в одном и том же календаре, используя ng bootstrap и angular 6

0 голосов
/ 19 сентября 2018

Здесь я использую загрузочную нг и угловую 6 для встроенного выбора даты.Здесь я устанавливаю даты программно до сих пор, это хорошо, но проблема заключается в том, что, когда я устанавливаю последние 7 дней до даты, она должна отображаться с даты как 02-9-2018 и до 17-09-2018.Вот проблема: когда я отображаю дату в отдельном календаре, дата «От» отображается в календаре 1, а дата «До» в календаре 2.

Теперь я пытаюсь выяснить,как я могу отобразить только один календарь?Я имею в виду, если последние 7 дней или последние 15 дней или месяц находятся в одном и том же месяце, то это не должно отображаться в другом календаре.Если он не в текущем месяце, то он должен отображать 2 даты в разных календарях.

Ниже мой код:

.ts code 

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

1 Ответ

0 голосов
/ 19 сентября 2018

Первым шагом является создание настраиваемого шаблона дня, см. 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
}
...