Mixing
Bootstrap NgbDate Date Range Calendar - “TypeError: Cannot read property 'equals' of undefined”
I'm using Angular Bootstrap to create a date range picker and although the code is exactly what's in their example, I get several errors, all stating "TypeError: Cannot read property 'equals' of undefined".
This is the code I have: https://stackblitz.com/angular/ggxrvppdjeq
The only real difference is that I'm importing NgbDate from another folder:
import { NgbDate } from '@ng-bootstrap/ng-bootstrap/datepicker/ngb-date';
If I try to do it from @ng-bootstrap/ng-bootstrap as the example had, I get an error in VSCode: node_modules/@ng-bootstrap/ng-bootstrap"' has no exported member. Switching it to what I have above makes the error go away... but perhaps this is causing the issue?
Template:
<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>
<hr>
<pre>From: {{ fromDate | json }} </pre>
<pre>To: {{ toDate | json }} </pre>
Component:
import { Component, OnInit } from '@angular/core';
import { NgbCalendar } from '@ng-bootstrap/ng-bootstrap';
import { NgbDate } from '@ng-bootstrap/ng-bootstrap/datepicker/ngb-date';
@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;
constructor(calendar: NgbCalendar) {
this.fromDate = calendar.getToday();
this.toDate = calendar.getNext(calendar.getToday(), 'd', 10);
}
onDateSelection(date: NgbDate) {
if (!this.fromDate && !this.toDate) {
this.fromDate = date;
} else if (this.fromDate && !this.toDate && date.after(this.fromDate)) {
this.toDate = date;
} else {
this.toDate = null;
this.fromDate = 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);
}
}
I was able to implement this successfully in an outside project but when I inserted into this existing project I'm having issues. Any help would be much appreciated, I can't figure it out.
angular asked Jan 2 at 23:37
TimTim
1279
add a comment |
I'm using Angular Bootstrap to create a date range picker and although the code is exactly what's in their example, I get several errors, all stating "TypeError: Cannot read property 'equals' of undefined".
This is the code I have: https://stackblitz.com/angular/ggxrvppdjeq
The only real difference is that I'm importing NgbDate from another folder:
import { NgbDate } from '@ng-bootstrap/ng-bootstrap/datepicker/ngb-date';
If I try to do it from @ng-bootstrap/ng-bootstrap as the example had, I get an error in VSCode: node_modules/@ng-bootstrap/ng-bootstrap"' has no exported member. Switching it to what I have above makes the error go away... but perhaps this is causing the issue?
Template:
<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>
<hr>
<pre>From: {{ fromDate | json }} </pre>
<pre>To: {{ toDate | json }} </pre>
Component:
import { Component, OnInit } from '@angular/core';
import { NgbCalendar } from '@ng-bootstrap/ng-bootstrap';
import { NgbDate } from '@ng-bootstrap/ng-bootstrap/datepicker/ngb-date';
@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;
constructor(calendar: NgbCalendar) {
this.fromDate = calendar.getToday();
this.toDate = calendar.getNext(calendar.getToday(), 'd', 10);
}
onDateSelection(date: NgbDate) {
if (!this.fromDate && !this.toDate) {
this.fromDate = date;
} else if (this.fromDate && !this.toDate && date.after(this.fromDate)) {
this.toDate = date;
} else {
this.toDate = null;
this.fromDate = 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);
}
}
I was able to implement this successfully in an outside project but when I inserted into this existing project I'm having issues. Any help would be much appreciated, I can't figure it out.
angular asked Jan 2 at 23:37
TimTim
1279
add a comment |
I'm using Angular Bootstrap to create a date range picker and although the code is exactly what's in their example, I get several errors, all stating "TypeError: Cannot read property 'equals' of undefined".
This is the code I have: https://stackblitz.com/angular/ggxrvppdjeq
The only real difference is that I'm importing NgbDate from another folder:
import { NgbDate } from '@ng-bootstrap/ng-bootstrap/datepicker/ngb-date';
If I try to do it from @ng-bootstrap/ng-bootstrap as the example had, I get an error in VSCode: node_modules/@ng-bootstrap/ng-bootstrap"' has no exported member. Switching it to what I have above makes the error go away... but perhaps this is causing the issue?
Template:
<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>
<hr>
<pre>From: {{ fromDate | json }} </pre>
<pre>To: {{ toDate | json }} </pre>
Component:
import { Component, OnInit } from '@angular/core';
import { NgbCalendar } from '@ng-bootstrap/ng-bootstrap';
import { NgbDate } from '@ng-bootstrap/ng-bootstrap/datepicker/ngb-date';
@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;
constructor(calendar: NgbCalendar) {
this.fromDate = calendar.getToday();
this.toDate = calendar.getNext(calendar.getToday(), 'd', 10);
}
onDateSelection(date: NgbDate) {
if (!this.fromDate && !this.toDate) {
this.fromDate = date;
} else if (this.fromDate && !this.toDate && date.after(this.fromDate)) {
this.toDate = date;
} else {
this.toDate = null;
this.fromDate = 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);
}
}
I was able to implement this successfully in an outside project but when I inserted into this existing project I'm having issues. Any help would be much appreciated, I can't figure it out.
angular asked Jan 2 at 23:37
TimTim
1279
I'm using Angular Bootstrap to create a date range picker and although the code is exactly what's in their example, I get several errors, all stating "TypeError: Cannot read property 'equals' of undefined".
This is the code I have: https://stackblitz.com/angular/ggxrvppdjeq
The only real difference is that I'm importing NgbDate from another folder:
import { NgbDate } from '@ng-bootstrap/ng-bootstrap/datepicker/ngb-date';
If I try to do it from @ng-bootstrap/ng-bootstrap as the example had, I get an error in VSCode: node_modules/@ng-bootstrap/ng-bootstrap"' has no exported member. Switching it to what I have above makes the error go away... but perhaps this is causing the issue?
Template:
<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>
<hr>
<pre>From: {{ fromDate | json }} </pre>
<pre>To: {{ toDate | json }} </pre>
Component:
import { Component, OnInit } from '@angular/core';
import { NgbCalendar } from '@ng-bootstrap/ng-bootstrap';
import { NgbDate } from '@ng-bootstrap/ng-bootstrap/datepicker/ngb-date';
@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;
constructor(calendar: NgbCalendar) {
this.fromDate = calendar.getToday();
this.toDate = calendar.getNext(calendar.getToday(), 'd', 10);
}
onDateSelection(date: NgbDate) {
if (!this.fromDate && !this.toDate) {
this.fromDate = date;
} else if (this.fromDate && !this.toDate && date.after(this.fromDate)) {
this.toDate = date;
} else {
this.toDate = null;
this.fromDate = 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);
}
}
I was able to implement this successfully in an outside project but when I inserted into this existing project I'm having issues. Any help would be much appreciated, I can't figure it out.
angular angular asked Jan 2 at 23:37
TimTim
1279
asked Jan 2 at 23:37
TimTim
1279
asked Jan 2 at 23:37
TimTim
1279
asked Jan 2 at 23:37
TimTim
1279
asked Jan 2 at 23:37
TimTim
1279
1279
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
The issue I think is that the ng-bootstrap version you are using, is not compatible with your angular version.
You can find the compatibles here.
For Angular 6 I used the 3.3.1 version. Here is the command:
npm install --save @ng-bootstrap/ng-bootstrap@3.3.1
answered 4 hours ago
Elias K.Elias K.
264
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54014592%2fbootstrap-ngbdate-date-range-calendar-typeerror-cannot-read-property-equals%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The issue I think is that the ng-bootstrap version you are using, is not compatible with your angular version.
You can find the compatibles here.
For Angular 6 I used the 3.3.1 version. Here is the command:
npm install --save @ng-bootstrap/ng-bootstrap@3.3.1
answered 4 hours ago
Elias K.Elias K.
264
add a comment |
The issue I think is that the ng-bootstrap version you are using, is not compatible with your angular version.
You can find the compatibles here.
For Angular 6 I used the 3.3.1 version. Here is the command:
npm install --save @ng-bootstrap/ng-bootstrap@3.3.1
answered 4 hours ago
Elias K.Elias K.
264
add a comment |
The issue I think is that the ng-bootstrap version you are using, is not compatible with your angular version.
You can find the compatibles here.
For Angular 6 I used the 3.3.1 version. Here is the command:
npm install --save @ng-bootstrap/ng-bootstrap@3.3.1
answered 4 hours ago
Elias K.Elias K.
264
The issue I think is that the ng-bootstrap version you are using, is not compatible with your angular version.
You can find the compatibles here.
For Angular 6 I used the 3.3.1 version. Here is the command:
npm install --save @ng-bootstrap/ng-bootstrap@3.3.1
answered 4 hours ago
Elias K.Elias K.
264
answered 4 hours ago
Elias K.Elias K.
264
answered 4 hours ago
Elias K.Elias K.
264
answered 4 hours ago
Elias K.Elias K.
264
264
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54014592%2fbootstrap-ngbdate-date-range-calendar-typeerror-cannot-read-property-equals%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
