Angular2 日期时间选择器建议答案

【问题标题】：Angular2 datetime picker suggestionsAngular2 日期时间选择器建议
【发布时间】：2017-07-31 08:59:26
【问题描述】：

我正在 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()
]

日期组件.ts

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

日期组件.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>

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

【问题讨论】：

ngbDatepicker 中的什么“不起作用”，究竟是什么？
请提供代码，说明您尝试完成的工作、尝试的工作以及失败的地方。

标签： angular datetime datetimepicker angular2-forms

【解决方案1】：

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

也就是说，您不需要为此使用 3rd 方组件 - 尽管您当然可以 - 但快速 google 会发现这些，所以我不会提及它们。

避免使用第 3 方选项，如果您使用的是模型驱动表单，您可以通过结合 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

【讨论】：

谢谢@Steveland83