Calander is not opening

[swapnil0071]

Versions

• Angular version: ^7.2.16
• component version:1.3.4

Describe the bug Component appars on web page but on click of calander its not opening

My Package.json

{ "name": "trubot2-console-app", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular-devkit/build-angular": "^0.10.7", "@angular/animations": "^7.2.16", "@angular/cdk": "^7.3.7", "@angular/common": "^7.2.16", "@angular/compiler": "^7.2.16", "@angular/core": "^7.2.16", "@angular/forms": "^7.2.16", "@angular/http": "^7.2.16", "@angular/material": "^7.3.7", "@angular/platform-browser": "^7.2.16", "@angular/platform-browser-dynamic": "^7.2.16", "@angular/router": "^7.2.16", "@aspnet/signalr": "^1.1.4", "@ng-bootstrap/ng-bootstrap": "^3.3.1", "bootstrap": "^4.5.0", "core-js": "^2.6.11", "crypto-js": "^3.1.9-1", "devextreme": "20.1.6", "devextreme-angular": "20.1.6", "humanize-duration-ts": "^2.1.1", "moment": "^2.27.0", "ng5-slider": "^1.1.14", "ngx-daterangepicker-material": "^1.3.4", "ngx-loading": "^3.0.1", "ngx-mat-daterange-picker": "^1.1.4", "ngx-moment": "^3.5.0", "rxjs": "~6.3.3", "zone.js": "^0.8.29" }, "devDependencies": { "@angular/cli": "^7.3.10", "@angular/compiler-cli": "^7.2.16", "@angular/language-service": "^7.2.16", "@types/jasmine": "^2.8.17", "@types/jasminewd2": "^2.0.8", "@types/node": "~8.9.4", "codelyzer": "~4.3.0", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~3.0.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "^2.1.1", "karma-jasmine": "~1.1.2", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "^5.4.4", "ts-node": "~7.0.0", "tslint": "~5.11.0", "typescript": "~3.1.6" } }

My Html code

<input #datetimePicker type="text" ngxDaterangepickerMd timePicker24Hour="true" (change)="choosedDate($event)" [readonly]="true" [(ngModel)]="selected" [keepCalendarOpeningWithRange]="true" [showRangeLabelOnInput]="true" [ranges]="ranges" [alwaysShowCalendars]="true" [maxDate]="maxDate" class="form-control" [showCustomRangeLabel]="true" [locale]="{'applyLabel': 'Apply'}" />

My ts code

========================================

import { Component, OnInit, ViewChild } from '@angular/core'; import { Service } from '../app.service'; import { SensativeinfoService } from '../Services/sensativeinfo.service'; import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material'; import { DxDataGridComponent } from 'devextreme-angular'; import { formatDate } from '@angular/common'; import CustomStore from 'devextreme/data/custom_store'; import notify from 'devextreme/ui/notify'; import * as moment from 'moment'; import { UserApiTrailServicesService } from '../Services/user-api-trail-services.service'; import { DaterangepickerDirective } from '../../../src/daterangepicker';

@Component({ selector: 'app-api-logs', templateUrl: './api-logs.component.html', styleUrls: ['./api-logs.component.scss'] }) export class ApiLogsComponent implements OnInit { loadingVisible: any = false; pageSizeSelectorVisible: boolean = false; showSearchData: boolean = true; public startTime: Date = new Date(); public endTime: Date = new Date(); Filter: any; isCustomRange: boolean = false; maxDate: moment.Moment = moment(); @ViewChild("datetimePicker") datetimePicker: NgxDaterangepickerMd; @ViewChild("reportGrid") reportGrid: DxDataGridComponent;

@ViewChild(DaterangepickerDirective) pickerDirective: DaterangepickerDirective;

logs: any = {} ranges: any = { 'Today': [moment().startOf('day'), moment().endOf('day')], 'Yesterday': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')], 'Last 3 Days': [moment().subtract(2, 'days'), moment()], //'This Month': [moment().startOf('month'), moment().endOf('month')], //'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')] } showsearch: boolean = false; xsShow: boolean; selected: { startDate: moment.Moment, endDate: moment.Moment }; constructor(private service: UserApiTrailServicesService, private appService: Service, private sensativeinfo: SensativeinfoService) { this.selected = { // startDate: moment().startOf('day'), //.subtract(30, 'days'), // endDate: moment().endOf('day'), startDate: moment('2015-11-18T00:00Z'), //.subtract(30, 'days'), endDate: moment('2015-11-26T00:00Z') } this.startTime = this.selected.startDate.toDate(); this.endTime = this.selected.endDate.toDate();

this.maxDate = moment().clone().add(10, 'years');

}

ngOnInit() { var width = (window.innerWidth > 0) ? window.innerWidth : screen.width; if (width <= 767) { // 768px portrait this.xsShow = true; } this.appService.setTitle('API Log'); this.getTrailLogWithPaging();

//(<any>(this.datetimePicker)).element.nativeElement.focus();     

}

choosedDate(event) { if (event.startDate != null) { this.Filter = "true"; this.startTime = new Date(event.startDate._d); this.endTime = new Date(event.endDate._d); if (!this.isCustomRangeSelected()) { this.getTrailLogWithPaging(); } else { this.downloadAsExcel(); } } } getTrailLog() { this.loadingVisible = true; var startTime = formatDate(this.startTime, 'yyyy-MM-ddTHH:mm:ss', 'en-US'); var endTime = formatDate(this.endTime, 'yyyy-MM-ddTHH:mm:ss', 'en-US'); this.service.getAll('/GetApiLogs?starttime=' + startTime + '&endtime=' + endTime).subscribe(resp => { resp = JSON.parse(this.sensativeinfo.decryptAES(resp)); let data = this.sensativeinfo.toCamel(resp); this.logs = data["logs"]; this.showsearch = this.logs.length > 0 ? true : false; this.loadingVisible = false; }); }

getTrailLogWithPaging() { this.loadingVisible = true; var errorService = this.service; if (this.reportGrid.instance != undefined) { this.reportGrid.instance.refresh(); this.logs = new Object(); this.showsearch = this.logs.length > 0 ? true : false; } var StartTime = this.startTime; var EndTime = this.endTime; let sensativeinfo = this.sensativeinfo; const gridStore = new CustomStore({ key: 'requestId', load: function (loadOptions: any) { var newStartTime = formatDate(StartTime, 'yyyy-MM-ddTHH:mm:ss', 'en-US'); var newEndTime = formatDate(EndTime, 'yyyy-MM-ddTHH:mm:ss', 'en-US'); var method = '/GetApiLogs?starttime=' + newStartTime + '&endtime=' + newEndTime; return errorService.getPaginatedList(method, loadOptions) .toPromise() .then((resp: any) => { resp = JSON.parse(sensativeinfo.decryptAES(resp)); let data = sensativeinfo.toCamel(resp); this.showsearch = data.logs.length > 0 ? true : false; return { data: data.logs, totalCount: data.totalCount

        }
      });

  }
});
this.logs.store = gridStore;
this.loadingVisible = false;
this.showSearchData = true;
gridStore.load().then(data => {
  if (Number(data.totalCount) <= 0) {
    this.pageSizeSelectorVisible = false;
    this.showSearchData = false;
  }
});

} downloadAsExcel() { this.loadingVisible = true; var startTime = formatDate(this.startTime, 'yyyy-MM-ddTHH:mm:ss', 'en-US'); var endTime = formatDate(this.endTime, 'yyyy-MM-ddTHH:mm:ss', 'en-US'); var url = "/DownloadApiLogs?starttime=" + startTime + "&endtime=" + endTime this.service.downloadFile(url).subscribe(resp => { var response = resp; if (response.code == '404' || response.code == 404) { notify('No records to download.', 'Alert'); } else { const data = window.URL.createObjectURL(response); var link = document.createElement('a'); link.href = data; link.download = "ApiLogs.xlsx"; link.click(); setTimeout(function () { // For Firefox it is necessary to delay revoking the ObjectURL window.URL.revokeObjectURL(data); }, 100); } this.loadingVisible = false; }, error => { this.loadingVisible = false; notify('No records to download.', 'Alert'); }); } isCustomRangeSelected() { var customRange = document.getElementsByTagName("button"); var isCustomRange = false; for (const key in customRange) { if (customRange.hasOwnProperty(key)) { const element = customRange[key]; if (element.innerText == "Custom range" && element.className == "active") { isCustomRange = true; break; } } }

return isCustomRange;

}

}

========================================

[tolsac]

Same issue