在 Angular 5 中动态更改 PrimeNG 计划的默认日期

Question

我在我的 Angular 6 解决方案中使用 PrimeNG 调度控制。我想动态更改默认日期，但它没有反映。如果我在初始页面加载时给出日期，它工作正常。请帮我做到这一点。在下面的代码中，您可以看到在订阅方法中也设置了初始加载时的默认日期，但订阅方法默认日期没有反映。

import { Component, OnInit, Input, OnChanges } from '@angular/core';
import { DatePipe } from '@angular/common';
import { BlockUI, NgBlockUI } from 'ng-block-ui';
import { AuthService } from '../../services/auth.service';
import { BaseServiceCollection } from '../../services/booking-portal.service';
import { SharedService } from '../../services/shared.service';
import { ToastrService } from 'ngx-toastr';
import * as jQuery from 'jquery';
(window as any).jQuery = (window as any).$ = jQuery;
import * as _ from 'lodash';
import * as moment from 'moment';
import 'fullcalendar';
import { ENMessageConstant } from '../../shared/utils/en-constMsgs'
import { DEMessageConstant } from '../../shared/utils/de-constMsgs';
@Component({
selector: 'app-booking-calendar',
templateUrl: 'booking-calendar.component.html',
styleUrls: ['booking-calendar.component.css']
})
export class BookingCalendarComponent implements OnInit {
@BlockUI() blockUI: NgBlockUI;
loading: boolean;
events: any[];
header: any;
options: any;
defaultDate: Date;
defaultView: String;
selectedCalendarDate: Date;
startDate: Date;
endDate: Date;
dateObject: any = {};
validationMsgs: any = [];
constructor(private toastrService: ToastrService, private _sharedService: SharedService,
private authService: AuthService, private baseService: BaseServiceCollection, public datePipe: DatePipe) {
}
ngOnInit() {
this._sharedService.changeEmitted$.subscribe(
text => {
if (text.display == true) {
this.loading = true;
this.blockUI.start();
this.events = [];
**this.defaultDate = new Date(text.selectedDate);**
this.selectedCalendarDate = new Date(text.selectedDate);
this.baseService.getcalendarSearchResult(text).subscribe(resp => {
if (resp) {
resp['Events'].forEach(element => {
this.events.push(Object.keys(element).reduce((c, k) => (c[k.toLowerCase()] = element[k], c), {}));
});
this.loading = false;
this.blockUI.stop();
}
},
error => {
console.log(error);
this.loading = false;
this.blockUI.stop();
});
}
},
error => {
console.log(error);
this.loading = false;
this.blockUI.stop();
});
const todaysDate = new Date();
**this.defaultDate = todaysDate;**
this.defaultView = "agendaWeek";
this.header = {
left: 'prev,next,today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
};
const that = this;
this.options = {
dayNamesShort: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
eventLimit: true,
views: {
month: {
eventLimit: 3
}
},
selectable: true,
dayClick: function (date) {
//alert('clicked ' + date.format());
},
select: function (startDate, endDate) {
that.selectRangeValidation(startDate, endDate);
if (that.validationMsgs.length !== 0) {
that.showValidationMsgs(that.validationMsgs);
this.startDate = todaysDate;
this.endDate = todaysDate;
}
else {
this.startDate = startDate.format();
this.endDate = endDate.format();
}
this.dateObject = {
'startDate': this.startDate,
'endDate': this.endDate,
'display': false
};
that._sharedService.emitChange(this.dateObject);
// alert('selected ' + startDate.format() + ' to ' + endDate.format());
}
};
}
loadEvents(event) {
//this.events = [];
if (this._sharedService.roomCalendareHeader) {
const data = {
'fromDate': event.view.start.toISOString(),
'toDate': event.view.end.toISOString(),
'roomCode': this._sharedService.roomCalendareHeader.roomCode,
};
this.loading = true;
this.blockUI.start();
this.baseService.getcalendarSearchResult(data).subscribe(resp => {
if (resp) {
this.events = [];
resp['Events'].forEach(element => {
this.events.push(Object.keys(element).reduce((c, k) => (c[k.toLowerCase()] = element[k], c), {}));
});
this.loading = false;
this.blockUI.stop();
}
},
error => {
console.log(error);
this.loading = false;
this.blockUI.stop();
});
}
}
selectRangeValidation(startDate, endDate) {
this.validationMsgs = [];
const dateToCompare = new Date();
const selectedStartDate = new Date(startDate.format());
const selectedEndDate = new Date(endDate.format());
const rangeStart = moment(selectedStartDate, 'YYYY-MM-DD');
const rangeEnd = moment(selectedEndDate, 'YYYY-MM-DD');
const rangeDiff = rangeEnd.diff(rangeStart, 'days');
if (selectedStartDate.getDate() < dateToCompare.getDate()) {
if (this.authService.language.toUpperCase() == "DE") {
this.validationMsgs.push(DEMessageConstant.START_DATE_BEFORE_TODAY);
} else if (this.authService.language.toUpperCase() == "EN") {
this.validationMsgs.push(ENMessageConstant.START_DATE_BEFORE_TODAY);
}
else {
this.validationMsgs.push(DEMessageConstant.START_DATE_BEFORE_TODAY);
}
}
if (rangeDiff > 0) {
this.validationMsgs.push("Bitte wählen Sie den Bereich nur für einen Tag");
}
}
showValidationMsgs(Messages) {
for (let index = 0; index < Messages.length; ++index) {
// this.toastrService.currentlyActive=0;
this.toastrService.success(Messages[index], 'Alert');
}
}
}

Answer 1

我使用以下代码行来实现： $('.ui-widget'(.fullCalendar('gotoDate'， this.defaultDate(;

this.defaultDate 只不过是我正在使用的日期模型，我在运行时在其中传递值