Динамическое изменение даты по умолчанию для расписания PrimeNG в Angular 5 - PullRequest
0 голосов
/ 22 октября 2018

Я использую управление расписанием PrimeNG в своем решении Angular 6.Я хочу изменить дату по умолчанию динамически, но это не отражает.Если я указываю дату загрузки начальной страницы, она работает нормально.Пожалуйста, помогите мне сделать это.В приведенном ниже коде вы можете видеть, что дата по умолчанию была установлена ​​при начальной загрузке также в методе подписки, но дата по умолчанию для метода подписки не отражает.

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

1 Ответ

0 голосов
/ 05 ноября 2018

Я использую следующую строку кода для достижения: $ ('. Ui-widget'). FullCalendar ('gotoDate', this.defaultDate);

this.defaultDate - это не что иное, как модель даты IЯ использую Я передаю значения во время выполнения в нем

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...