以下是一个使用Angular的日期范围选择器和多个按钮的解决方法的示例代码：

首先，安装所需的Angular依赖项：

npm install moment ng2-daterangepicker

在你的模块中导入依赖项：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { Daterangepicker } from 'ng2-daterangepicker';

@NgModule({
  imports: [BrowserModule, Daterangepicker],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

在你的组件中使用日期范围选择器和多个按钮：

import { Component } from '@angular/core';
import * as moment from 'moment';

@Component({
  selector: 'app',
  template: `
    
    Apply
    Cancel
  `
})
export class AppComponent {
  selectedDateRange: string;

  openDateRangePicker() {
    const options: any = {
      locale: { format: 'YYYY-MM-DD' },
      alwaysShowCalendars: false,
      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')]
      }
    };

    $('input').daterangepicker(options, (start, end) => {
      this.selectedDateRange = start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD');
    });
  }

  applyDateRange() {
    // 处理应用日期范围的逻辑
    console.log('Applying date range:', this.selectedDateRange);
  }

  cancelDateRange() {
    // 处理取消日期范围的逻辑
    console.log('Canceling date range');
  }
}

在这个示例中，我们使用了ng2-daterangepicker库来创建日期范围选择器。当用户点击输入框时，我们会调用openDateRangePicker()方法来打开选择器。选择器上有一个Apply按钮和一个Cancel按钮，分别用于应用和取消选择的日期范围。在applyDateRange()和cancelDateRange()方法中，你可以处理对应的逻辑。

请注意，上述代码中使用了$('input').daterangepicker()来初始化日期范围选择器。这里我们使用了jQuery选择器，但你也可以使用其他方式来选择输入框元素。

希望这个示例能帮助到你！