Я использую my-date-range-picker
, чтобы отобразить календарь, чтобы пользователь выбрал дату и отобразил ее в виде строки в виде строки.
Шаг за шагом:
- Я нажимаю на ярлык, чтобы открыть календарь;
- Календарь открывается с выбранной текущей датой;
- Iвыберите дату, например, 8 октября 2018 года;
- Календарь закрывается;
- Дата, которую я выбрал предыдущий, отображается правильно в
span
; - Откройте календарьснова;
Здесь календарь показывает текущий месяц (сентябрь).Я хочу, чтобы в этом календаре была указана дата, которую я выбирал ранее - 8 октября 2018 года;
Мой 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();
}
Я просто хочу, чтобы календарь открывался в предыдущем выбранном месяце, потому что дата выбрана правильно.
ОБНОВЛЕНИЕ:
В примере, который я описываю, дата верна, но не показывает месяц правильно