How to track the change event on <nb-calendar-range> tag

[jaysoniscale]

Issue type

I'm submitting a ... (check one with "x")

• [ ] bug report
• [x] feature request

Issue description

Expected behavior: I'm using the nb-calendar-range as a parameters for my service in loading data to chart and tables I successfully do it on load but I cannot track the change event of the nb-calendar-range tag.

Related code:

<nb-calendar-range [(range)]="range" [min]="min" [max]="max"></nb-calendar-range>

Other information:

npm, node, OS, Browser

Node, npm: v8.11.3 and 6.3.0
OS: Linux (Ubuntu 16)
Browser: Chrome

Angular, Nebular

{
  "name": "ngx-admin",
  "version": "2.3.0",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/akveo/ngx-admin.git"
  },
  "bugs": {
    "url": "https://github.com/akveo/ngx-admin/issues"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "IE 11"
  ],
  "scripts": {
    "ng": "ng",
    "conventional-changelog": "conventional-changelog",
    "start": "ng serve",
    "build": "ng build",
    "build:prod": "npm run build -- --prod --aot",
    "test": "ng test",
    "test:coverage": "rimraf coverage && npm run test -- --code-coverage",
    "lint": "ng lint",
    "lint:fix": "ng lint ngx-admin-demo --fix",
    "lint:styles": "stylelint ./src/**/*.scss",
    "lint:ci": "npm run lint && npm run lint:styles",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "ng e2e",
    "docs": "compodoc -p src/tsconfig.app.json -d docs",
    "docs:serve": "compodoc -p src/tsconfig.app.json -d docs -s",
    "prepush": "npm run lint:ci",
    "release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s"
  },
  "dependencies": {
    "@agm/core": "1.0.0-beta.2",
    "@angular/animations": "6.0.0",
    "@angular/common": "6.0.0",
    "@angular/compiler": "6.0.0",
    "@angular/core": "6.0.0",
    "@angular/forms": "6.0.0",
    "@angular/http": "6.0.0",
    "@angular/platform-browser": "6.0.0",
    "@angular/platform-browser-dynamic": "6.0.0",
    "@angular/router": "6.0.0",
    "@asymmetrik/ngx-leaflet": "3.0.1",
    "@nebular/auth": "2.0.0-rc.9",
    "@nebular/security": "2.0.0-rc.9",
    "@nebular/theme": "^2.0.0-rc.10",
    "@ng-bootstrap/ng-bootstrap": "1.0.0",
    "@swimlane/ngx-charts": "7.0.1",
    "angular-tree-component": "7.2.0",
    "angular2-chartjs": "0.4.1",
    "angular2-toaster": "6.0.0",
    "angular5-csv": "^0.2.10",
    "bootstrap": "4.0.0",
    "chart.js": "^2.7.2",
    "ckeditor": "4.7.3",
    "classlist.js": "1.1.20150312",
    "core-js": "2.5.1",
    "echarts": "^4.0.2",
    "font-awesome": "4.7.0",
    "intl": "1.2.5",
    "ionicons": "2.0.1",
    "jquery": "^3.3.1",
    "leaflet": "1.2.0",
    "moment": "^2.22.2",
    "nebular-icons": "1.0.8",
    "ng2-ckeditor": "1.1.13",
    "ng2-smart-table": "1.2.2",
    "ngx-echarts": "2.0.1",
    "ngx-select-dropdown": "^0.7.1",
    "normalize.css": "6.0.0",
    "pace-js": "1.0.2",
    "roboto-fontface": "0.8.0",
    "rxjs": "^6.1.0",
    "rxjs-compat": "^6.1.0",
    "socicon": "3.0.5",
    "tinymce": "4.5.7",
    "typeface-exo": "0.0.22",
    "web-animations-js": "2.2.5",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.0",
    "@angular/cli": "6.0.0",
    "@angular/compiler-cli": "6.0.0",
    "@angular/language-service": "6.0.0",
    "@compodoc/compodoc": "1.0.1",
    "@types/d3-color": "1.0.5",
    "@types/googlemaps": "3.30.4",
    "@types/jasmine": "2.5.54",
    "@types/jasminewd2": "2.0.3",
    "@types/leaflet": "1.2.3",
    "@types/node": "6.0.90",
    "codelyzer": "4.0.2",
    "conventional-changelog-cli": "1.3.4",
    "husky": "0.13.3",
    "jasmine-core": "2.6.4",
    "jasmine-spec-reporter": "4.1.1",
    "karma": "^2.0.5",
    "karma-chrome-launcher": "2.1.1",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "1.3.0",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "npm-run-all": "4.0.2",
    "protractor": "^5.4.0",
    "rimraf": "2.6.1",
    "stylelint": "7.13.0",
    "ts-node": "3.2.2",
    "tslint": "5.7.0",
    "tslint-language-service": "0.9.6",
    "typescript": "2.7.2"
  }
}

[Tibing]

Hi @jaysoniscale, could you please provide more context. Maybe you can create stackblitz?

[jaysoniscale]

Hi @Tibing I managed to work with it somehow by this I can track the start date and end date as the nb-calendar-range updates.

<nb-calendar-range [range]="range" [min]="min" [max]="max" (rangeChange)="getRangeDate($event)"></nb-calendar-range>

getRangeDate(event) {

    if (event.start && event.end) {
      this.fromDate = new Date(event.start);
      this.toDate = new Date(event.end);

      this.range = {
        start: NbDateTimeUtil.addDay(this.fromDate, 0),
        end: NbDateTimeUtil.addDay(this.toDate, 0),
      }

      this.loadChart();

    }

  }

[cmajsmith]

I think the problem here is that rangeChange event isn't mentioned in the documentation for calendar component. Actually the whole NbCalendarRangeComponent is not covered by docs.

[Tibing]

Hi @cmajsmith , @jaysoniscale , we'll update docs asap.

[Prefix1802]

So is this problem resolved in an appropriate way?

calendar-range.component.ts Emits range when start selected and emits again when end selected.

@Output() rangeChange: EventEmitter = new EventEmitter();

[chrischak]

So what was the solution to this problems?