1

ボタンをクリックするとポップアップする独自の ng-bootstrap datepicker によって入力された 2 つの入力があります。新しい日付を選択すると、入力は適切に入力されますが、私の問題は、入力を null または単に別の値に初期化したい場合です。私のgetDate機能がそれを妨げていることは知っていますが、それを許可するように変更する方法がわかりません。

スクリーンショット (各入力の右側にあるボタンをクリックすると、日付ピッカーが開きます。入力ごとに 1 つ): ここに画像の説明を入力

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関数の 2 行目を次のように変更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 に答える