My Date Picker always open in the current month

Question

I'm using a my-date-range-picker to display a calendar to the user choose a date and display her in a span like a string.

Step by step:

I click in the label to open the calendar;
The calendar opens with current date selected;
I choose a date, for example, 8th October, 2018;
The calendar closes;
The date that i previous choose appears correctly in span;
Open the calendar again;

Here, the calendar shows the current month(September). I want that calendar show the date that i previous select - 8th October, 2018;

My HTML code for date picker:

<my-date-range-picker *ngIf="this.opened && view=='date'" class="date_picker" [options]="date_picker" [(ngModel)]="this.model" (dateSelected)="onDateRangeChanged($event)"></my-date-range-picker>

The label responsable to show the selected date:

<div class="lineheight" [ngClass]="{'dates': type_resume_view == 'none'}">
  <span>{{dates.first.format('DD/MM/YYYY')}}</span>
</div>

In my TS file, the event of date change goes to:

onDateRangeChanged(ev) {
    if (this.view == "range") {
        this.dates.first = moment({
            day: ev.beginDate.day,
            month: ev.beginDate.month - 1,
            year: ev.beginDate.year
        });

        this.dates.last = moment({
            day: ev.endDate.day,
            month: ev.endDate.month - 1,
            year: ev.endDate.year
        });
        this.setDate();
        if (!this.always_open) {
            this.onSelectDate.emit(this.dates);
            this.opened = false;
        }
    }
    if (this.view == "date") {
        this.dates.first = moment({
            day: ev.date.day,
            month: ev.date.month - 1,
            year: ev.date.year
        });
        this.dates.last = moment({
            day: ev.date.day,
            month: ev.date.month - 1,
            year: ev.date.year
        });

        if (!this.always_open) {
            this.onSelectDate.emit(this.dates);
            this.opened = false;
        }

        if (this.interval != undefined) {
            switch (this.interval) {
                case "week":
                    this.dates.first = this.dates.first.startOf("week").add(1, 'day');
                    this.dates.last = this.dates.last.endOf("week").add(1, 'day');
                    break;
                case "month":
                    this.dates.first = this.dates.first.startOf("month");
                    this.dates.last = this.dates.last.endOf("month");
                    break;
            }
        }

        this.setDate();

        if (this.always_open) {
            this.opened = false;
            setTimeout(() => {
                this.opened = true
            }, 0);
        }
    }
}

And then to method setDate():

this.model.beginDate.year = this.dates.first.format("YYYY");
this.model.beginDate.month = this.dates.first.format("MM");
this.model.beginDate.day = this.dates.first.format("DD");
this.model.endDate.year = this.dates.last.format("YYYY");
this.model.endDate.month = this.dates.last.format("MM");
this.model.endDate.day = this.dates.last.format("DD");

My declared variables are:

date_picker: IMyDrpOptions = {
    showClearBtn: false,
    showApplyBtn: false,
    showSelectDateText: false,
    componentDisabled: false,
    markCurrentDay: true,
    showWeekNumbers: true,
    inline: true,
    dateFormat: 'yyyy-mm-dd',
    firstDayOfWeek: 'mo',
    disableUntil: {
        year: 1990,
        month: 1,
        day: 1
    }
};


private model: any = {
    beginDate: {
        year: 2018,
        month: 10,
        day: 9
    },
    endDate: {
        year: 2018,
        month: 10,
        day: 19
    }
};

Auxiliar Methods:

open_calendar() {
    this.model = this.model;
    if (!this.always_open) {
        this.opened = !this.opened;
        if (this.opened) {
            this.onCalendarOpen.emit(this.dates);
        } else {
            this.onClose.emit();
        }
    }
}

close_calendar() {
    this.opened = false;
    this.onClose.emit();

}

I just want that calendar open in the previous selected month, because the date is correctly selected.

UPDATE:

The example that i describe, the date is correct but not show the month correctly

Vivens Ndatinya Vivens Ndatinya · Accepted Answer · 2019-08-23T20:58:34

my-date-range-picker has the defaultMonth attribute, that's what you will use to set which month the calendar should open such as:

import { IMyDefaultMonth } from 'mydatepicker'; 
private defaultMonth: IMyDefaultMonth = { defMonth: '12/2019' };

In HTML:

<my-date-range-picker name="mydate" [options]="myDatePickerOptions" [defaultMonth]="defaultMonth" />

in the example the default month will open at December 2019 as defined by defaultMonth.

My Date Picker always open in the current month

1 Answers