setValue using DaterangepickerDirective is not working

[paritosh93]

Hi Sir,

I am trying to update date range of ngxDaterangepickerMd directive to an input element dynamically. I am able to change the value but it is not reflecting on the view.

Please help me to solve this one.

Thank You!

[fetrarij]

Could you give more info? with which version do you use it? more detail on how did you update the value? share a stackblitz if you could.

Thanks

[paritosh93]

Hi Sir

I have attached my package.json

{ "name": "cranecbm", "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/animations": "~7.2.0", "@angular/cdk": "~7.3.7", "@angular/cli": "~7.3.3", "@angular/common": "~7.2.0", "@angular/compiler": "~7.2.0", "@angular/compiler-cli": "~7.2.0", "@angular/core": "~7.2.0", "@angular/fire": "^5.2.3", "@angular/forms": "~7.2.0", "@angular/material": "^7.3.7", "@angular/platform-browser": "~7.2.0", "@angular/platform-browser-dynamic": "~7.2.0", "@angular/router": "~7.2.0", "@ngx-gallery/core": "^5.0.0-beta.0", "@ngx-gallery/gallerize": "^5.0.0-beta.0", "@ngx-gallery/lightbox": "^5.0.0-beta.0", "@types/googlemaps": "^3.38.0", "@types/offscreencanvas": "^2019.6.0", "@types/three": "^0.103.2", "@types/webgl2": "0.0.5", "angular-gauge": "^3.1.2", "angular-progress-bar": "^1.0.9", "angular2-multiselect-dropdown": "^4.6.3", "canvasjs": "^1.8.1", "core-js": "^2.5.4", "export-to-csv": "^0.2.1", "firebase": "^7.6.0", "hammerjs": "^2.0.8", "highcharts": "^7.2.1", "highcharts-angular": "^2.4.0", "moment": "^2.24.0", "ng5-slider": "^1.2.4", "ngx-cookie": "^4.1.2", "ngx-cookie-service": "^2.0.0", "ngx-daterangepicker-material": "^2.1.10", "rxjs": "~6.3.3", "sweetalert2": "^9.7.1", "three": "^0.110.0", "three-orbitcontrols-ts": "^0.1.2", "tslib": "^1.9.0", "zone.js": "~0.8.26" }, "devDependencies": { "@angular-devkit/build-angular": "~0.13.0", "@angular/cli": "~7.3.3", "@angular/compiler-cli": "~7.2.0", "@angular/language-service": "~7.2.0", "@types/node": "~8.9.4", "@types/jasmine": "~2.8.8", "@types/jasminewd2": "~2.0.3", "codelyzer": "~4.5.0", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~4.0.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~1.1.2", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.11.0", "typescript": "~3.2.2" } }

In ts page

selectedDate: { startDate: moment.Moment; endDate: moment.Moment; }; @ViewChild(DaterangepickerDirective) datePicker: DaterangepickerDirective;

ngOnInit() { this.interval = setInterval(() => { this.selectedDate = { startDate: moment().subtract(3, "days").startOf("day"), endDate: moment(), }; this.datePicker.value = this.selectedDate; this.datePicker.setValue(this.selectedDate); }, 60000); }

in html page

<div class="custom">
                <label>Date Range</label>
                <input
                  type="text"
                  id="datePicker"
                  #datePicker
                  ngxDaterangepickerMd
                  [maxDate]="maxdate"
                  [timePicker]="true"
                  [timePicker24Hour]="false"
                  [(ngModel)]="selectedDate"
                  name="selectedDate"
                />
              </div>

I am using setinterval to update date after one minute, date is updated but view page its not showing.

Thanks for your valuable response.

[Codefans-fan]

i get same issue

[caohothang]

same it still not fix ?

[caohothang]

My solution is this.date.isHide = true; setTimeout(()=> { this.date.isHide = false; },100);

we can hide and show input in timeout, it will effect