Angular2日期時間選擇器建議

我正在尋找一個在Angular2中的日期時間選擇器， - 我有一個datetimepicker使用HTML5通過設置輸入類型作爲日期和這個工程。但是，它不符合我的要求，因爲我需要根據今天的日期減去5天設置思維，maxdate是今天 - 運行時驗證。所以不能在HTML中真正硬編碼值。Angular2日期時間選擇器建議

試圖使用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

來源

2017-07-31 Maiur Laximidas

「ngbDatepicker」中的「沒有工作」，究竟是什麼？ –

請提供演示您嘗試完成的代碼，您嘗試的內容以及失敗的位置。 –

這是一個相當主觀的問題，所以你很可能會得到基於意見的回覆 - 包括這一個。

也就是說，你不需要需要使用第三方組件 - 雖然你當然可以 - 但一個快速谷歌會揭示這些，所以我不會提及它們。

避免使用第三方選項，如果您使用的是模型驅動表單，您可以使用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

來源

2017-07-31 11:53:36 Steveland83

謝謝@ Steveland83 –

Angular2日期時間選擇器建議

回答

相關問題