Ng Bootstrap Выбор диапазона дат [markDisabled] не работает при вводе - PullRequest
Новая
       12

Ng Bootstrap Выбор диапазона дат [markDisabled] не работает при вводе

1 голос
/ 20 марта 2019

Я пытаюсь отключить определенные даты на ng средстве выбора начальной загрузки

В настоящее время у меня во всплывающем окне есть указатель диапазона, и я использую [markDisabled] для отключения определенных дат.

HTML 

<form class="form-inline">
 <div class="form-group">
<div class="input-group">
  <input
     #myRangeInput
    class="form-control" 
    placeholder="mm/dd/yyyy - mm/dd/yyyy"
    name="dp" 
    [(ngModel)]="model" 
    ngbDatepicker 
    [dayTemplate]="t"
    [autoClose]="false"
    [displayMonths]="2"
    [maxDate]="maxDate"
    [minDate]="minDate"
    #d="ngbDatepicker" [markDisabled]="isDisabled">

    <ng-template #t let-date="date" let-focused="focused" >
        <span class="custom-day" 
            [class.range]="isFrom(date) || isTo(date) || isInside(date) || isHovered(date)"
            [class.faded]="isHovered(date) || isInside(date)"
            (click)="onDateSelection(date)"
            (mouseenter)="hoveredDate = date"
            (mouseleave)="hoveredDate = null"
            >
        {{ date.day }}
        </span>
    </ng-template>
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" (click)="d.toggle()" type="button"> click
    </button>
  </div>
 </div>
 </div>
</form>

Компонент: 

 const now = new Date();
 const equals = (one: NgbDateStruct, two: NgbDateStruct) =>
 one && two && two.year === one.year && two.month === one.month && two.day 
 === one.day;

 const before = (one: NgbDateStruct, two: NgbDateStruct) =>
 !one || !two ? false : one.year === two.year ? one.month === two.month ? 
 one.day === two.day
 ? false : one.day < two.day : one.month < two.month : one.year < two.year;

 const after = (one: NgbDateStruct, two: NgbDateStruct) =>
 !one || !two ? false : one.year === two.year ? one.month === two.month ? one.day === two.day
? false : one.day > two.day : one.month > two.month : one.year > two.year;



 export class NgbdDatepickerRange implements OnInit{
 isDisabled = (date: NgbDate, current: {month: number}) => date.day === 13;

startDate: NgbDateStruct;
maxDate: NgbDateStruct;
minDate: NgbDateStruct;
hoveredDate: NgbDateStruct;
fromDate: any;
toDate: any;
model: any;
private _subscription: Subscription;
private _selectSubscription: Subscription;
@ViewChild("d") input: NgbInputDatepicker;
@ViewChild(NgModel) datePick: NgModel;
@ViewChild('myRangeInput') myRangeInput: ElementRef;

isHovered = date => 
this.fromDate && !this.toDate && this.hoveredDate && after(date, this.fromDate) && before(date, this.hoveredDate)
isInside = date => after(date, this.fromDate) && before(date, this.toDate);
isFrom = date => equals(date, this.fromDate);
isTo = date => equals(date, this.toDate);
constructor(element: ElementRef, private renderer: Renderer2, private _parserFormatter: NgbDateParserFormatter) {

}
ngOnInit() {
    this.startDate = {year: now.getFullYear(), month: now.getMonth() + 1, day: now.getDate()};
    this.maxDate = { year: now.getFullYear() + 1, month: now.getMonth() + 1, day: now.getDate()};
    this.minDate = {year: now.getFullYear() - 1, month: now.getMonth() + 1, day: now.getDate()};
}

onDateSelection(date: NgbDateStruct) {
    let parsed = '';
    if (!this.fromDate && !this.toDate) {
        this.fromDate = date;
    } else if (this.fromDate && !this.toDate && after(date, this.fromDate)) {
        this.toDate = date;
        // this.model = `${this.fromDate.year} - ${this.toDate.year}`;
        this.input.close();
    } else {
        this.toDate = null;
        this.fromDate = date;
    }
    if(this.fromDate) {
      parsed += this._parserFormatter.format(this.fromDate);
    }
    if(this.toDate) {
      parsed += ' - ' + this._parserFormatter.format(this.toDate);
    }

    this.renderer.setProperty(this.myRangeInput.nativeElement, 'value', parsed);
}
}

[markDisabled] отлично работает при использовании следующим образом 

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

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

Вот демоверсия

1 Ответ

0 голосов
/ 20 марта 2019

Я не уверен, почему, но каким-то образом ваш пользовательский шаблон дня (ng-template let-date="date"), по-видимому, препятствовал отображению / помечению отключенных дат как отключенных в календаре всплывающих окон.Вы могли перезаписать некоторые свойства случайно.

Я не подробно изучил ваш код, но я попробовал следующее, и, похоже, это работает.

Во-первых, в вашем component.html я использовал свойство disabled, которое является частью DayTemplateContext .После чего я установил класс text-muted как true для disabled дат.Это даст серый цвет для дат disabled.Убедитесь, что ваш 

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

В ваших component.ts, я внес следующие изменения в ваш метод onDateSelection().Это не очень элегантно, но пока делает свою работу.Я в основном обернул его оператором if, чтобы проверить, что дата 13-го числа (которая является датой отключения).Это предотвратит выбор самой даты.

onDateSelection(date: NgbDateStruct) {
  let parsed = '';
  if (date.day!==13) {
   .
   .
   // rest of your code
   }
}

РЕДАКТИРОВАНИЕ: Спасибо @Eliseo за советы, и да, мы можем просто добавить проверку для disabled в событии click.Таким образом, нет необходимости в этом операторе if в вашем операторе onDateSelection ().Я обновил демо, чтобы отразить изменения. 

<ng-template #t let-date="date" let-focused="focused" let-disabled="disabled">
  <span class="custom-day" 
  [class.text-muted]="disabled"
  [class.range]="isFrom(date) || isTo(date) || isInside(date) || isHovered(date)"
  [class.faded]="isHovered(date) || isInside(date)"
  (click)="!disabled && onDateSelection(date)"
  (mouseenter)="hoveredDate = date"
  (mouseleave)="hoveredDate = null">
    {{ date.day }}
  </span>
</ng-template>

Вы можете обратиться к моей демо здесь

...