ng-bootstrap DatePicker 在触发器 Angular 4 上设置 startDate 和 minDate

Question

所以，我使用的是 ng-bootstrap DatePicker，并且有两种形式，startDate 和 endDate 我需要能够用这个做两件事：

• 在渲染“创建页面”时，将今天的日期放在 startDate 上，如果渲染“编辑页面”，则从后端输入日期..
• 选择startDate时，触发minDate属性为选择的startDate

这就是我正在尝试做的事情（现在使用硬编码，而不是从后端获取数据）

export class ProgramFormComponent {
  startDate: NgbDateStruct;
  endDate: NgbDateStruct;
  minEndDate: NgbDateStruct;

  programInput = {
    'viewType' : 'Create',
    'programTitle' : '',
    'programDescription' : '',
    'programOwner' : [
        ''
      ],
    'changepointID' : '',
    'startDate' : this.startDate,
    'endDate' : this.endDate,
    'minDate' : this.minEndDate
  }

  programInputEdit = {
    'viewType' : 'Edit',
    'programTitle' : 'Test Title',
    'programDescription' : 'Test Description',
    'programOwner' : [
        'Test Owner 1',
        'Test Owner 2',
        'Test Owner 3',
      ],
    'changepointID' : 'ID',
    'startDate' : this.startDate,
    'endDate' : this.endDate,
    'minDate' : this.minEndDate
  }

  constructor(private modalService: NgbModal) {
    if (this.programInput['viewType'] === 'Create') {
        this.selectToday();
    } else {
        this.startDate = {year: 2017, month: 7, day: 1};
        this.endDate = {year: 2017, month: 12, day: 2};
    }
  }

  open(content) {
    this.modalService.open(content, { windowClass: 'dark-modal' });
  }

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

  limitEndDate() {
    this.minEndDate = this.startDate;
  }

<form>
<div class="form-group">
            <label for="startDate" class="control-label">Start Date</label>
            <div class="input-group">
                <input class="form-control" placeholder="yyyy-mm-dd"
                     name="startDate" [(ngModel)]="programInput.startDate" ngbDatepicker #s="ngbDatepicker" firstDayOfTheWeek=1 [startDate]="programInput.startDate">
                <div class="input-group-addon" (click)="s.toggle()" >
                    <i class="fa fa-calendar" aria-hidden="true"></i>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label for="startDate" class="control-label">End Date</label>
            <div class="input-group">
                <input class="form-control" placeholder="yyyy-mm-dd"
                     name="startDate" [(ngModel)]="programInput.endDate" ngbDatepicker #e="ngbDatepicker" [minDate]="programInput.minEndDate">
                <div class="input-group-addon" (click)="e.toggle()" >
                    <i class="fa fa-calendar" aria-hidden="true"></i>
                </div>
            </div>
        </div>
</form>

另外，如果有人知道怎么做，我希望日历的弹出显示在页面顶部的方向上，而不是底部...没有找到任何属性来设置这个。

Answer 1

您可以在没有属性minDate 的情况下执行此操作，但如果您需要它，您可以执行以下操作。我引入了一个新变量 dataToBeUsed（适当命名）作为我们使用的变量，因此在本示例中与您的代码相比，请考虑到这一点。

第一个问题，您想检查这是Create 还是“其他东西”。我更喜欢在 OnInit 而不是构造函数中做初始的事情。您提到如果viewType 不是'Create'，您将从后端获取数据，所以....

ngOnInit() {
  if (this.programInput['viewType'] === 'Create') {
    // remember objects are mutable
    this.dataToBeUsed = this.programInput;
    this.dataToBeUsed.startDate = {year: new Date().getFullYear(), month: new Date().getMonth() + 1, day: new Date().getDate()};
  } else {
    this.getData()
      .subscribe(data => {
        this.dataToBeUsed = data;
      })
  }    
}

您想在开始日期更改时更改minDate。所以让我们使用ngModelChange（其余省略）

<input (ngModelChange)="setMinDate($event)" [(ngModel)]="dataToBeUsed.startDate">

setMinDate方法：

setMinDate(event) {
  this.dataToBeUsed.minDate = event;
}

从你的代码中，我删除了变量

startDate, endDate, minEndDate

因为我认为它们没有用。我们可以在dataToBeUsed 对象中引用相同的属性。

所以对于第二个日期选择器，您想要禁用开始日期之前的日期，我们将其标记为：

[minDate]="dataToBeUsed.minDate"

这里有一个 plunker 供您参考：http://plnkr.co/edit/zfGUrMJkJzQXTBJ86OSs?p=preview