Question

我在Angular2中寻找一个日期时间选择器， - 我有一个使用HTML5的datetimepicker，通过将输入类型设置为日期，这是有效的。然而，它不符合我的要求，因为我需要根据今天的日期减去5天来设置思维，而maxdate就是今天 - 运行时验证。所以不能真正硬编码html中的值。

尝试使用 ngbDatepicker ，但它不起作用。

任何建议都非常感谢。

以下是我尝试使用ngbDatePicker时的代码： -

App.module.shared.ts

Bar

DateComponent.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.html

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

点击日历不会显示datetimepicker

Answer 1

这是一个相当主观的问题，所以你可能会得到基于意见的回答 - 包括这一回答。

那就是说，你不需要为此使用第三方组件 - 虽然你当然可以 - 但快速谷歌会揭示这些，所以我不会提及它们。

避免第三方选项，如果您使用模型驱动表单，您可以使用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

用于日期范围检查代码的

NB dates对象来自http://stackoverflow.com/questions/497790

Angular2日期时间选择器建议

1 个答案: