CODEWITHSUNDEEP
htmltwitter-bootstrapangularng-bootstrap
Drew13
Drew13

Reputation: 1371

Initialize input populated by ng-bootstrap datepicker to blank

I have two inputs, each populated by their own ng-bootstrap datepicker that pops up when I click a button. The input populates properly when you choose a new date, but my problem is if I want to initialize the inputs to null or simply another value. I know my getDate function gets in the way of that, I'm just not sure how to change it to allow that.

Screenshot (datepicker opens with click of the button to the right of each input, one per input): enter image description here

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>

Typescript:

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;
  }
 }

Upvotes: 2

Views: 2886

Answers (1)

Drew13
Drew13

Reputation: 1371

Changed second line in getDate function to let timestamp = this[workingDateName] != null ? new Date(this[workingDateName].year, this[workingDateName].month - 1, this[workingDateName].day).getTime() : null;

Upvotes: 1

Related Questions