angular中的jquery datepicker:无法从datepicker回调函数中获取值

83qze16e  于 2021-09-13  发布在  Java
关注(0)|答案(0)|浏览(210)

我在angular中使用jquery。我想要一个包含开始日期和结束日期的日期选择器。所以一切都很顺利。但我无法从jquery datepicker回调函数中获取这些值。
app.component.html

<mat-form-field class="formInput">
     <input matInput #calender [(ngModel)]="minDate"
            [max]="maxDate !== undefined ? maxDate : currentDate"
            placeholder="Start date">
</mat-form-field> 

<oz-mat-button class="formButton" (oz_click)="displayData()" [isDisable]="!minDate || !maxDate" [iconName]="'arrow_forward'"></oz-mat-button>

app.component.ts

// All NEEDED IMPORT STATEMENTS
declare var $:any ;

export class AppComponent implements OnInit, AfterViewInit, OnDestroy{

minDate: Date;
maxDate: Date;

@ViewChild('calender') calender: ElementRef;

ngAfterViewInit(){
   console.log(this.calender.nativeElement);

            $(this.calender.nativeElement).daterangepicker({
                "showDropdowns": true,
                "autoApply": true,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                },
                "startDate": "06/24/2021",
                "endDate": "06/30/2021"
            }, function(start, end, label) {
              console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
              this.minDate = start; //here I can't get suggestion from vscode.
              this.maxDate = end;   //here I can't get suggestion from vscode.
              console.log(this.minDate, this.maxDate);
            });
}

displayData(){
  // here I can not get those minDate and maxDate which I already changed in that Jquery callback function
  console.log(minDate, maxDate);
// perform task related to displaying-data by minDate and maxDate parameters.
}
}

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题