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

Question

所以，我正在使用 ng-bootstrap DatePicker，并且有两种形式，startDate 和 endDate 我需要能够用它做两件事:

• 当呈现“创建页面”时，将今天的日期放在开始日期，如果呈现“编辑页面”，则将后端的日期..
• 选择起点时，触发思维属性为选定的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