Диапазон дат при всплывающем окне ngboostrap - PullRequest
Новая
       23

Диапазон дат при всплывающем окне ngboostrap

0 голосов
/ 01 октября 2019

Как использовать диапазон дат при всплывающем окне в ng-bootstrap. 

<ngb-datepicker #dp (select)="onDateSelection($event)" [displayMonths]="2" [dayTemplate]="t" outsideDays="hidden">
</ngb-datepicker>

<ng-template #t let-date let-focused="focused">
  <span class="custom-day"
        [class.focused]="focused"
        [class.range]="isRange(date)"
        [class.faded]="isHovered(date) || isInside(date)"
        (mouseenter)="hoveredDate = date"
        (mouseleave)="hoveredDate = null">
    {{ date.day }}
  </span>
</ng-template>

Это код диапазона дат, но я пытаюсь найти решение, чтобы открыть этот диапазон дат при раскрытии.

Ответы [ 2 ]

0 голосов
/ 01 октября 2019

Извините, мой комментарий, на самом деле идея состоит в том, что есть RangeSelect в выпадающем меню, см. stackblitz 

<code><form class="form-inline">
  <div  ngbDropdown class="form-group" placement="bottom-rigth" #myDrop="ngbDropdown">
    <div class="input-group">
      <input name="range" class="form-control" [ngModel]="range" placeholder="yyyy-mm-dd" (click)="toogle=!toogle">
      <div class="input-group-append">
        <button ngbDropdownToggle class="btn btn-outline-secondary calendar"  type="button"></button>
      </div>
      <div ngbDropdownMenu >
  <ngb-datepicker  #dp (select)="onDateSelection($event,myDrop)" [displayMonths]="2" [dayTemplate]="t" outsideDays="hidden">
</ngb-datepicker>
        </div>
    </div>
  </div>
</form>

<ng-template #t let-date let-focused="focused">
  <span class="custom-day"
        [class.focused]="focused"
        [class.range]="isRange(date)"
        [class.faded]="isHovered(date) || isInside(date)"
        (mouseenter)="hoveredDate = date"
        (mouseleave)="hoveredDate = null">
    {{ date.day }}
  </span>
</ng-template>
<hr/>
<pre>From: {{ fromDate | json }} 
To: {{ toDate | json }}

Единственное, что изменяется отисходная документация в выбранном диапазоне состоит в том, что я пропускаю раскрывающийся список, чтобы позволить нам закрыться.

при изменении даты я форматирую значение «диапазон», которое отображается во входных данных 

export class AppComponent  {
  name = 'Angular';
  hoveredDate: NgbDate;

  fromDate: NgbDate;
  toDate: NgbDate;

  range:string;

  constructor(calendar: NgbCalendar) {
    this.fromDate = calendar.getToday();
    this.toDate = calendar.getNext(calendar.getToday(), 'd', 10);
  }

  onDateSelection(date: NgbDate,drop:any) {
    if (!this.fromDate && !this.toDate) {
      this.fromDate = date;
    } else if (this.fromDate && !this.toDate && date.after(this.fromDate)) {
      this.toDate = date;
     drop.close()
    } else {
      this.toDate = null;
      this.fromDate = date;
    }
    this.range=this.formatRange(this.fromDate,this.toDate)
  }

  isHovered(date: NgbDate) {
    return this.fromDate && !this.toDate && this.hoveredDate && date.after(this.fromDate) && date.before(this.hoveredDate);
  }

  isInside(date: NgbDate) {
    return date.after(this.fromDate) && date.before(this.toDate);
  }

  isRange(date: NgbDate) {
    return date.equals(this.fromDate) || date.equals(this.toDate) || this.isInside(date) || this.isHovered(date);
  }
  formatRange(fromDate:NgbDate,toDate:NgbDate)
  {
    return (fromDate?''+fromDate.year+"-"+('00'+fromDate.month).slice(-2)+"-"+('00'+fromDate.day).slice(-2):"")
            +" to "+
            (toDate?''+toDate.year+"-"+('00'+toDate.month).slice(-2)+"-"+('00'+toDate.day).slice(-2):"")
  }
}

TODO: добавить (ngModel) во входные данные, чтобы присвоить значения toDate и fromDate или сделать вход только для чтения.

TODO2: создать customFormControl с компонентом

Обновление Мы можем использовать formControl для обновления диапазона, стек стека равен здесь

, в основном мы используем [formControl] = "range", где range - это formControl, поэтому мыможно подписаться на valueChanges 

this.range.valueChanges
      .pipe(
        takeWhile(() => this.alive),
        debounceTime(500)
      )
      .subscribe(res => this.change(res));

И у нас есть изменение функции, как 

change(range: string) {
    let start = this.rangeInput.nativeElement.selectionStart;
    let value = range.replace(/[^0-9]+/g, "").split("");
    let valueJoin = value.join("");
    let valueFormated = "";
    let fromDate: NgbDate = null;
    let toDate: NgbDate = null;

    if (value.length >= 8)
      fromDate = new NgbDate(
        +valueJoin.substring(0, 4),
        +valueJoin.substring(4, 6),
        +valueJoin.substring(6, 8)
      );

    if (value.length == 16)
      toDate = new NgbDate(
        +valueJoin.substring(8, 12),
        +valueJoin.substring(12, 14),
        +valueJoin.substring(14)
      );

    value.forEach((c, index) => {
      valueFormated += c;
      switch (index) {
        case 3:
        case 5:
        case 11:
        case 13:
          valueFormated += "-";
          break;
        case 7:
          valueFormated += " to ";
      }
    });
    this.range.setValue(valueFormated, { emitEvent: false });
    this.fromDate = fromDate;
    this.toDate = toDate;
  }
0 голосов
/ 01 октября 2019

Если вы посмотрите примеры кода stackblitz, они устанавливают значения в конструкторе: stackblitz

, вам просто нужно добавить свои собственные значения.

будьте осторожны, используя ихсвой собственный формат даты: ngbDateStructure

...