1

我有两个输入，每个输入都由它们自己的 ng-bootstrap 日期选择器填充，当我单击一个按钮时会弹出。当您选择新日期时，输入会正确填充，但我的问题是如果我想将输入初始化为 null 或只是另一个值。我知道我的getDate功能会妨碍它，我只是不确定如何更改它以允许它。

屏幕截图（日期选择器通过单击每个输入右侧的按钮打开，每个输入一个）： 在此处输入图像描述

HTML：

<form class="form-inline">
  <div>
    <div class="form-group" [ngClass]="{'has-error':!secondForm.controls['startDate'].valid && secondForm.controls['startDate'].touched}">
      <label>Start Date:</label>
      <input style="width:250px" [value]="getDate('start')" class="form-control" type="text" [formControl]="secondForm.controls['startDate']">
    </div>
    <div style="display:inline-block">
      <ngb-datepicker id="special" *ngIf="startCheck;" [(ngModel)]="startDate" (ngModelChange)="showDatePick(0)" [ngModelOptions]="{standalone: true}"></ngb-datepicker>
    </div>
    <button type="button" class="btn icon-calendar" (click)="showDatePick(0)"></button>
    <div class="form-group" [ngClass]="{'has-error':!secondForm.controls['endDate'].valid && secondForm.controls['endDate'].touched}">
      <label>End Date:</label>
      <input style="width:250px" [value]="getDate('end')" class="form-control" type="text" [formControl]="secondForm.controls['endDate']">
    </div>
    <div style="display:inline-block">
      <ngb-datepicker id="special" *ngIf="endCheck;" [(ngModel)]="endDate" (ngModelChange)="showDatePick(1)" [ngModelOptions]="{standalone: true}"></ngb-datepicker>
    </div>
    <button type="button" class="btn icon-calendar" (click)="showDatePick(1)"></button>
    <button type="submit" class="btn icon-search" [disabled]="!secondForm.valid"></button>
    <span [hidden]="!secondForm.hasError('endDateLessThanStartDate')" class="alert alert-danger first">End Date must be equal to or after Start Date</span>
  </div>
</form>

打字稿：

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import {NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';
import {DatePipe} from "@angular/common";

@Component({
  selector: 'calendar-pick',
  styleUrls: ['../app.component.css'],
  templateUrl: './calendarpick.component.html',
  providers: [DatePipe]
})

export class CalendarPickComponent {
  public dt: NgbDateStruct;
  public dt2: NgbDateStruct;
  public startCheck: boolean = false;
  public endCheck: boolean = false;
  secondForm : FormGroup;

  public constructor(fb: FormBuilder, private datePipe: DatePipe) {
    this.secondForm = fb.group({
    'startDate' : [null, Validators.required],
    'endDate' : [null, Validators.required]
    }, {validator: this.endDateAfterOrEqualValidator})
  }

  public getDate(dateName: string) {
    let workingDateName = dateName + 'Date';
    let timestamp = this[workingDateName] != null ? new Date(this[workingDateName].year, this[workingDateName].month-1, this[workingDateName].day).getTime() : new Date().getTime();
    this.secondForm.controls[dateName + 'Date'].setValue(this.datePipe.transform(timestamp, 'MM/dd/yyyy'));
  }

  public showDatePick(selector):void {
    if(selector === 0) {
      this.startCheck = !this.startCheck;
    } else {
      this.endCheck = !this.endCheck;
    }
  }

  endDateAfterOrEqualValidator(formGroup): any {
    var startDateTimestamp, endDateTimestamp;
    for(var controlName in formGroup.controls) {
      if (controlName.indexOf("startDate") !== -1) {
        startDateTimestamp = Date.parse(formGroup.controls[controlName].value);
      }
      if (controlName.indexOf("endDate") !== -1) {
        endDateTimestamp = Date.parse(formGroup.controls[controlName].value);
      }
    }
    return (endDateTimestamp < startDateTimestamp) ? { endDateLessThanStartDate: true } : null;
  }
 }
4

1 回答 1

1

getDate将函数中的第二行更改为let timestamp = this[workingDateName] != null ? new Date(this[workingDateName].year, this[workingDateName].month - 1, this[workingDateName].day).getTime() : null;

于 2016-11-17T18:34:25.973 回答