ngb-Datepicker show wrong month on popup

Question

I'm working with angular bootstrap datepicker and having some weird issues. When opening the webpage everything looks alright, but when I want to change the date and I click on the calendar button to get the popup calendar it is showing the wrong month, and if I'll click on a date I'll get the date for 1 month forward.

for example, when I'm opening the page on August 8th, the date shows August 8th, and the popup shows the month: Jul, and if I'll choose the 9th I'll get August 9th.

EDIT: Thanks to Pankaj the month in the popup is fixed, but the issue still remains, when picking a date the date picker picks a date that is one month ahead.

picture for example:

this is the HTML code for that particular date picker:

        <div class="input-group">
            <input class="form-control"
                   placeholder="Enter start date"
                   name="dpStart"
                   [(ngModel)]="startDateModel"
                   (ngModelChange)="checkTimes()"
                   ngbDatepicker #startDateInput="ngbDatepicker"
                   required
                   (ngModelChange)  = "autoUpdateEndDate()"
                   [firstDayOfWeek] = 7> <!--##FIRST DAY OF THE WEEK: Sunday-->
          <button class="btn btn-outline-secondary calendar"
                  (click)="startDateInput.toggle()" type="button">

check Time and autoUpdateEndDate are both helper functions that check if the end date is after the start date and set the end date to be the same as the start date under certain conditions.

I would be truly grateful for any lead on the matter...

Answer 1

We do not have full visibility to your checkTimes() and autoUpdateEndDate() functions, but it seems like you are directly using the month value from ngb-datepicker within new Date(). As you already know by now, the native month indexes are 1 less than regular count, so you have to reduce that 1 after the selection.

new Date(event.year, event.month - 1, event.day);

You can also combine your ngModelChange() functions in one line

(ngModelChange)="checkTimes($event); autoUpdateEndDate()"

Demo

Answer 2

EDIT: In addition to the main fix that is below, a change was also needed in assigning the date into startDateModel, i worked with new Date and it wasn't working well. so i needed to add calender: NgbCalendar to the constructor, and set start date to calender.getToday() (and break it down to month day year for the NgbDataStruct)

I finally found the issue.

The issue was rooted in a "date parser formatter" I add . in which I got the date (as NgbDateStruct) and formated it using moment:

format(date: NgbDateStruct): string { return date ? moment(date).format("MMM Do yyyy"): " ";

and that made the issue, i'm not sure how moment tried to parse the NgbDateStruct, but i think it was doing great job other then that moment (and Date) is 0 based month and NgbDateStruct is 1 based month.

so the fix was changing

return date ? moment(date).subtract(1, "month").format("MMM Do yyyy"): " ";

for quite a hard fix.

or a better solution is letting moment do his parsing: return date ? moment([date.month , date.day , date.year], "MM-DD-yyyy").format("MMM Do yyyy"): " ";

Thank you all for all your help!

Answer 3

Use [startDate] and assign the value in ts file.

<input type="text" readonly formControlName="date_of_birth [startDate]="dateOfBirth" ngbDatepicker (click)="d.toggle()" #d="ngbDatepicker" (dateSelect)="onDateSelect($event)" placement="top"
    class="form-control mb-2" placeholder="Date of Brith" />

Assign ngb object to startdate and it will show the selected value.

  dateOfBirth = {
    day: new Date().getUTCDate(),
    month: new Date().getUTCMonth() + 1,
    year: new Date().getUTCFullYear() - 16,
  };
 onDateSelect(ngbDate) {
    this.dateOfBirth = ngbDate
  }

Use startdate to show the selected value.