我在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.
}
}
暂无答案!
目前还没有任何答案,快来回答吧!