Angular NG-Boostrap中的DatePicker

Question

i have a problem selecting the date from the ng-bootstrap range selection date picker. I can only see the value of one date but not the second one. How will i able to select the second date when using reactive forms. Thanks. Please see this stackblitz link CLICK HERE

<ngb-datepicker #dp (select)="onDateSelection($event)" [displayMonths]="2" [dayTemplate]="t" outsideDays="hidden" formControlName="date">
    </ngb-datepicker>

    <ng-template #t let-date let-focused="focused">
        <span class="custom-day"
        [class.focused]="focused"
        [class.range]="isRange(date)"
        [class.faded]="isHovered(date) || isInside(date)"
        (mouseenter)="hoveredDate = date"
        (mouseleave)="hoveredDate = null">
    {{ date.day }}
  </span>
</ng-template>

Answer 1

you can do something like this

Example this

import {Component} from '@angular/core';
import {NgbDate, NgbCalendar} from '@ng-bootstrap/ng-bootstrap';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { NgbDateParserFormatter } from './NgbDateParserFormatter';


@Component({
  selector: 'ngbd-datepicker-range',
  templateUrl: './datepicker-range.html',
  styles: [`
    .custom-day {
      text-align: center;
      padding: 0.185rem 0.25rem;
      display: inline-block;
      height: 2rem;
      width: 2rem;
    }
    .custom-day.focused {
      background-color: #e6e6e6;
    }
    .custom-day.range, .custom-day:hover {
      background-color: rgb(2, 117, 216);
      color: white;
    }
    .custom-day.faded {
      background-color: rgba(2, 117, 216, 0.5);
    }
  `]
})


export class NgbdDatepickerRange {

  hoveredDate: NgbDate;
  alldate:String;
  fromDate: any;
  toDate: any;

   list: NgbDate[] = [];
   dateForm: FormGroup;

  constructor(calendar: NgbCalendar, private formBuilder: FormBuilder) {
    this.fromDate = calendar.getToday();
    this.toDate = calendar.getNext(calendar.getToday(), 'd', 10);
    this.dateForm = this.formBuilder.group({
      date: [null, Validators.required],
    });
  }

  onDateSelection(date: NgbDate) {
    if (!this.fromDate && !this.toDate) {
      this.fromDate = date;
      console.log("if " +JSON.stringify(date));

    } else if (this.fromDate && !this.toDate && date.after(this.fromDate)) {
      this.toDate = date;
      this.list.push(date);
      console.log("else if " +JSON.stringify(date));
    } else {
      this.toDate = null;
      this.list.push(date);
      this.fromDate = date;
      console.log("else " +JSON.stringify(date));

    }
  }

  isHovered(date: NgbDate) {
    return this.fromDate && !this.toDate && this.hoveredDate && date.after(this.fromDate) && date.before(this.hoveredDate);
  }

  isInside(date: NgbDate) {
    return date.after(this.fromDate) && date.before(this.toDate);
  }

  isRange(date: NgbDate) {
    return date.equals(this.fromDate) || date.equals(this.toDate) || this.isInside(date) || this.isHovered(date);
  }

  onSubmit(form: FormGroup) {
 console.log(this.list);
  console.log(form.value)
  }

}

Answer 2

You were not inserting a second date in your reactive form which is why you couldn't see it. My approach was to use setValue to insert from/to dates inside the reactive form

relevant HTML :

<form [formGroup]="myDateForm" (ngSubmit)="onSubmit(myDateForm)">

  <ngb-datepicker #dp (select)="onDateSelection($event)" [displayMonths]="2" [dayTemplate]="t" outsideDays="hidden" >
    </ngb-datepicker>

    <ng-template #t let-date let-focused="focused">
        <span class="custom-day"
        [class.focused]="focused"
        [class.range]="isRange(date)"
        [class.faded]="isHovered(date) || isInside(date)"
        (mouseenter)="hoveredDate = date"
        (mouseleave)="hoveredDate = null">
    {{ date.day }}
  </span>
</ng-template>

<!--
  <pre>From: {{ fromDate | json }} </pre>
<pre>To: {{ toDate | json }} </pre>
-->
<br/>
<button type="submit" class="btn btn-sm btn-primary">Submit</button>
</form>

<b>Form Status:</b>{{myDateForm.value | json}}

relevant TS :

import { Component } from '@angular/core';
import { NgbDate, NgbCalendar } from '@ng-bootstrap/ng-bootstrap';
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'ngbd-datepicker-range',
  templateUrl: './datepicker-range.html',
  styles: [`
    .custom-day {
      text-align: center;
      padding: 0.185rem 0.25rem;
      display: inline-block;
      height: 2rem;
      width: 2rem;
    }
    .custom-day.focused {
      background-color: #e6e6e6;
    }
    .custom-day.range, .custom-day:hover {
      background-color: rgb(2, 117, 216);
      color: white;
    }
    .custom-day.faded {
      background-color: rgba(2, 117, 216, 0.5);
    }
  `]
})
export class NgbdDatepickerRange {

  hoveredDate: NgbDate;

  fromDate: NgbDate;
  toDate: NgbDate;

  dateForm: FormGroup;


  myDateForm: FormGroup;
  myFromDate: FormControl;
  myToDate: FormControl;

  constructor(calendar: NgbCalendar, private formBuilder: FormBuilder) {
    this.fromDate = calendar.getToday();
    this.toDate = calendar.getNext(calendar.getToday(), 'd', 10);
    this.dateForm = this.formBuilder.group({
      date: [null, Validators.required],
      endDate: [null, Validators.required],
    });

    this.myDateForm = new FormGroup({
      myFromDate: new FormControl(''),
      myToDate: new FormControl(''),
    });

  }

  onDateSelection(date: NgbDate) {
    if (!this.fromDate && !this.toDate) {
      this.fromDate = date;
    } else if (this.fromDate && !this.toDate && date.after(this.fromDate)) {
      this.toDate = date;
      let dateObj = new Date(this.toDate.year, this.toDate.month, this.toDate.day);
      this.myDateForm.controls.myFromDate.setValue(dateObj);
    } else {
      this.toDate = null;
      this.fromDate = date;
      let dateObj = new Date(this.fromDate.year, this.fromDate.month, this.fromDate.day);
      this.myDateForm.controls.myToDate.setValue(dateObj);
    }
  }

  isHovered(date: NgbDate) {
    return this.fromDate && !this.toDate && this.hoveredDate && date.after(this.fromDate) && date.before(this.hoveredDate);
  }

  isInside(date: NgbDate) {
    return date.after(this.fromDate) && date.before(this.toDate);
  }

  isRange(date: NgbDate) {
    return date.equals(this.fromDate) || date.equals(this.toDate) || this.isInside(date) || this.isHovered(date);
  }

  onSubmit(form: FormGroup) {
    console.log(form.value)
  }

}

complete working stackblitz here

Answer 3

another one. Your form is like

this.dateForm = new FormGroup({
     from:new FormControl(),
     to:new FormControl()
   })

NOT put formControlName in .html, and change the function onDateSeleccion by

onDateSelection(date: NgbDate) {
    if (!this.fromDate && !this.toDate) {
      this.fromDate = date;
      this.dateForm.get('from').setValue(date);
    } else if (this.fromDate && !this.toDate && date.after(this.fromDate)) {
      this.toDate = date;
      this.dateForm.get('to').setValue(date);
    } else {
      this.toDate = null;
      this.fromDate = date;
      this.dateForm.get('from').setValue(date);
      this.dateForm.get('to').setValue(null);
    }
  }

stackblitz