как отключить существующие даты из углового ngbdatepicker - PullRequest
Новая
       39

как отключить существующие даты из углового ngbdatepicker

0 голосов
/ 26 февраля 2019

У меня есть массив существующих данных.как отключить существующие данные при выборе даты из ngbdatepicker?

вот мой код отключения с прошлой даты 

var current = new Date();
current.setDate(current.getDate());
this.minDates = {
                  year: current.getFullYear(),
                  month: current.getMonth() + 1,
                  day: current.getDate(),

                };

это мой код для массива существующих дат 

var avDateArray = [];
 for(var i=0;i<this.tmpResponse[0].available_date.length;i++){
                  avDateArray.push(this.tmpResponse[0].available_date[i].start_date);
                }

то, что я путаю, как отключить дату из массива существующих дат в ngbdatepicker в угловых?

Ответы [ 3 ]

0 голосов
/ 26 февраля 2019

Отключение и ограничение дат

Вы можете ограничить даты, доступные для навигации и выбора, используя входы [minDate] и [maxDate].Если вы не укажете ни один из них, у вас будет бесконечная навигация, и в окне выбора года будут отображаться [-10, +10] годы от текущего видимого месяца.

Если вы хотите отключить некоторые даты длявыбор (например, выходные), вы должны предоставить функцию [markDisabled], которая будет отмечать определенные даты, которые нельзя выбрать.Он будет вызываться для каждого нового видимого дня при переходе между месяцами. 

// disable the 13th of each month
const isDisabled = (date: NgbDate, current: {month: number}) => day.date === 13;
<ngb-datepicker [minDate]="{year: 2010, month: 1, day: 1}"
                [maxDate]="{year: 2048, month: 12, day: 31}"
                [markDisabled]="isDisabled">
</ngb-datepicker>

См. Также следующую ссылку: Mark-disabled-ng-bootstrap

нг-самозагрузка

0 голосов
/ 26 февраля 2019

просто создайте массив с отключенными датами 

disabledDates:NgbDateStruct[]=[
    {year:2019,month:2,day:26}
  ]

И создайте функцию "isDisabled" 

  isDisabled=(date:NgbDateStruct,current: {month: number,year:number})=> {
    //in current we have the month and the year actual
    return this.disabledDates.find(x=>new NgbDate(x.year,x.month,x.day).equals(date))?
         true:false;
  }

  //or briefly

  isDisabled=(date:NgbDateStruct,current: {month: number,year:number})=>
    this.disabledDates.find(x=>new NgbDate(x.year,x.month,x.day).equals(date))?true:false;

Ваш ngb-datepicker использует [markDisabled] 

<ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"
      [markDisabled]="isDisabled"></ngb-datepicker>

См. Stabblitz

0 голосов
/ 26 февраля 2019

Вы пытаетесь отключить прошлые даты?Вы можете сделать что-то вроде этого:

В ваших component.ts 

minDate = undefined;
.
. 
constructor(private config: NgbDatepickerConfig) {
  const current = new Date();
  this.minDate = {
    year: current.getFullYear(),
    month: current.getMonth() + 1,
    day: current.getDate()
  };

}
.
.
markDisabled(date: NgbDateStruct) {
  const d = new Date(date.year, date.month - 1, date.day);
  return d.getDate()===this.disabledDate.getDate() && d.getMonth()===this.disabledDate.getMonth && d.getYear()===this.disabledDate.getYear()
  })
}

и в вашем component.html, используйте входную привязку [minDate] для отключения прошлых дат и [markDisabled]привязка ввода для отключения динамического списка дат 

<input class="form-control" ngbDatepicker [minDate]="minDate"  [markDisabled]="markDisabled" (click)="datePicker.toggle()" #datePicker="ngbDatepicker" placeholder="yyyy-mm-dd">
...