Question

我有数组现有数据。从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中的angulars的现有日期数组中禁用日期？

Answer 1

您是否要禁用过去的日期？您可以执行以下操作：

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

Answer 2

禁用和限制日期

您可以使用[minDate]和[maxDate]输入来限制可用于导航和选择的日期。如果您未指定任何一个，则将具有无限导航功能，并且年份选择框将显示从当前可见月份开始的[-10，+10]年。

如果要禁用某些选择日期（例如周末），则必须提供[markDisabled]功能，该功能将标记某些日期为不可选择的。当您在月份之间导航时，它将在每个新近可见的日子被调用。

    var flowHeightConstraint: NSLayoutConstraint?

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white

        view.addSubview(button)
        button.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        button.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
        button.widthAnchor.constraint(equalToConstant: 100).isActive = true
        flowHeightConstraint = button.heightAnchor.constraint(equalToConstant: 30)
        flowHeightConstraint?.isActive = true
    }

    @objc func animateButtonTapped() {
        UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.5, options: .curveEaseOut, animations: {
            self.flowHeightConstraint?.constant = 100
            self.view.layoutIfNeeded()
        }, completion: nil)
    }

    lazy var button: UIButton = {
       let button = UIButton()
        button.translatesAutoresizingMaskIntoConstraints = false
        button.backgroundColor = .green
        button.addTarget(self, action: #selector(animateButtonTapped), for: .touchUpInside)
        return button
    }()

还请参考以下链接： Mark-disabled-ng-bootstrap

ng-bootstrap

Answer 3

只需创建一个具有禁用日期的数组

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>

请参见stackblitz

如何从ngbdatepicker角度禁用现有日期

3 个答案: