Angular2 datetime pickerの提案

Question

私はAngular2のdatetime pickerを探しています。 - 私はdatetimepickerをdateとして入力タイプを設定してHTML5を使用しています。 しかし、今日の日付から5日を差し引いたマインドを設定する必要があるため、maxdateは今日のランタイム検証であるため、私の要件を満たしていません。だから、本当にHTMLで値をハードコーディングすることはできません。

ngbDatepickerを試しましたが、動作しませんでした。

本当にありがとうございます。

以下

はngbDatePickerを使用しようとしながら、私のコードです： -

App.module.shared.ts

import { Component, NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; 

@NgModule({ 
declarations: 
[ 
    AppComponent 
], 
imports: 
[ 
    CommonModule, 
    NgbModule.forRoot() 
] 

DateComponent.ts

export class DateComponent implements OnInit 
{ 
     public model : Date; 
} 

DateComponent.html

<form [formGroup]="myForm"> 
<div> 
<div class="input-group"> 
    <input class="form-control" placeholder="dd-mm-yyyy" name="dp" 
    [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker" [ngModelOptions]=" 
    {standalone: true}"> 
<div class="input-group-addon" (click)="d.toggle()" > 
    <i class="glyphicon glyphicon-calendar" aria-hidden="true"></i> 
</div> 

</div> 

カレンダーにはdatetimepickerが表示されません

Answer 1

これはかなり主観的な質問ですので、これを含む意見に基づく回答を得る可能性があります。あなたは確かに可能性が - - しかし、簡単にGoogleはこれらを明らかにするので、私は文句を言わないそれらに言及した

は、あなたがこのためにサードパーティのコンポーネントを使用する 必要いけません。

モデルドリブンフォームを使用している場合は、HTML5 input type='date'（以前と同じように）とカスタム角度バリデーターの組み合わせで、非常に簡単にこれを行うことができます。以下のような何か：

HTML

<form [formGroup]="validateExampleForm"> 
    <label>some date to be validated:</label> 
    <input type="date" formControlName="someDate"><br> Valid: {{validateExampleForm && validateExampleForm.controls.someDate.valid}}<br> 
    <button type="submit">Submit</button> 
</form> 

活字体

ngOnInit() { 
    this.validateExampleForm = this.formBuilder.group({ 
     someDate: [this.dateValue, (control) => this.validateIsDateInLastFiveDays(control)] 
    }); 
} 

validateIsDateInLastFiveDays(control: FormControl): { [key: string]: boolean } { 
    let val = control.value; 
    let minDateValue: Date = new Date(); 
    minDateValue.setDate(minDateValue.getDate() - 5); 

    if (!dates.inRange(new Date(val), minDateValue, this.today)) { 
     return { "someerrortype": true }; 
    } 

    return null; 
} 

ここ

全plunker： https://plnkr.co/edit/XT4YzCYPdD6lpBGlzpII?p=preview

NBdates日付範囲チェックコードに使用されるオブジェクトはhttp://stackoverflow.com/questions/497790