Angular2 日期时间选择器建议

Question

我正在 Angular2 中寻找日期时间选择器，- 我有一个使用 HTML5 的日期时间选择器，方法是将输入类型设置为日期，这很有效。然而，它不符合我的要求，因为我需要根据今天的日期减去 5 天来设置 mindate，而 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>

点击日历不显示日期时间选择器

Answer 1

这是一个相当主观的问题，因此您可能会得到基于意见的答复 - 包括这个。

就是说，您 不需要 为此使用第 3 方组件 - 虽然您当然可以 - 但快速 google 会揭示这些，所以我不会提到他们。

避免第 3 方选项，如果您使用的是模型驱动表单，您可以通过组合 HTML5 input type='date'（如前所述）和自定义 angular 验证器。类似于以下内容：

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 用于日期范围检查代码的对象来自

Angular2 日期时间选择器建议

Angular2 datetime picker suggestions

datetime

datetimepicker

angular2-forms

angular