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"

以下是您的參考資料： http ：//plnkr.co/edit/zfGUrMJkJzQXTBJ86OSs？p = preview