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

“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

谢谢@ Steveland83 –

Angular2日期时间选择器建议

相关推荐