NG-ブートストラップ日付ピッカーは、私はNG-ブートストラップ日付ピッカーを使用し、2つのフォームを持っているよ、4

Question

だから、アンギュラトリガーでたstartDateとMinDateプロパティを設定し、たstartDateとendDateに 私はこれで2つのことを行うことができるようにする必要があります。

• とき、レンダリング、「編集ページの」レンダリングバックエンドから日付を入れる場合は、「ページの作成」たstartDateを選択したとき
• 、する属性MinDateプロパティトリガー..たstartDateに今日の日付を入れて選択した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はあなたがminDateたときに、あなたの開始日の変更を変更したい

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; 
     }) 
    }  
} 

'Create'ないが、そう....場合は、バックエンドからデータを取得すると述べました。

コードから

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

、私が削除した変数

startDate, endDate, minEndDate 

私は彼らのためには使用を参照していないので：それでは、ngModelChangeの使用を（残りは省略）

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

setMinDate方法にしましょう。 dataToBeUsedオブジェクトの同じ属性を参照することができます。

はそう、あなたのSTARTDATEの前にあるの日付を無効にしたい二日付ピッカー、のために、我々はとしてマーク：

[minDate]="dataToBeUsed.minDate" 

ここにあなたの参考のためplunkerです：http://plnkr.co/edit/zfGUrMJkJzQXTBJ86OSs?p=preview