Вы не вставляли в свою реактивную форму второе свидание, поэтому не могли его увидеть.Мой подход состоял в том, чтобы использовать setValue
для вставки с / на даты внутри реактивной формы
релевантно HTML :
<code><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 }}
To: {{ toDate | json }}
->Отправить
Статус формы: {{myDateForm.value |json}}
релевантно 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)
}
}
завершено здесь работает стекаблитц