Question

我正在使用my-date-range-picker来显示日历，以供用户选择一个日期并将其显示在一个字符串之类的范围内。

逐步：

我单击标签以打开日历；
打开日历并选择当前日期；
我选择一个日期，例如2018年10月8日；
日历关闭；
我先前选择的日期正确显示在span中；
再次打开日历；

在这里，日历显示了当前月份（9月）。我希望该日历显示我以前选择的日期- 2018年10月8日；

我的日期选择器HTML代码：

<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>

负责显示所选日期的标签：

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

在我的TS文件中，日期更改事件发生在：

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);
        }
    }
}

然后转到方法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");

我声明的变量是：

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
    }
};

辅助方法：

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();

}

我只希望该日历在上一个选定月份中打开，因为正确选择了日期。

更新：

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

Answer 1

my-date-range-picker具有defaultMonth属性，您将使用该属性来设置日历应在哪个月打开，例如：

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

在HTML中：

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

在此示例中，默认月份将根据defaultMonth的定义在2019年12月打开。

我的日期选择器在当月始终打开

1 个答案: