如何修改ngx-daterangepicker-material的默认选中值为最近30天

问题根因 #

你遇到的不生效问题由两个核心原因导致：

1. 你配置的minDate为dayjs().subtract(3, 'days')，仅允许选择最近3天内的日期，「Last 30 Days」的起始日期为29天前，超出可选范围，组件会自动将非法的默认值替换为默认合法范围「Today」
2. 你在构造函数中给selected赋值时，组件还未完成初始化，ngModel绑定未生效，赋值不会被组件识别

修复步骤 #

第一步：调整minDate配置（必做） #

如果需要支持选择最近30天的范围，先把minDate的时间范围放宽到至少30天前：

constructor() {
  this.maxDate = dayjs().add(2,  'weeks');
  // 将minDate从 subtract(3, 'days') 改为 subtract(29, 'days')
  this.minDate = dayjs().subtract(29, 'days');

  this.alwaysShowCalendars = true;
  this.keepCalendarOpeningWithRange = true;
  this.showRangeLabelOnInput = true;
}

第二步：修正默认值赋值逻辑（二选一即可） #

方案1：属性初始化时直接赋值

直接在selected属性定义时赋值为和ranges中「Last 30 Days」完全匹配的范围：

// 替换原有selected: any; 定义
selected: any = {
  startDate: dayjs().subtract(29, 'days'),
  endDate: dayjs()
};

方案2：赋值逻辑移到ngOnInit生命周期

ngOnInit() {
  this.selected = {
    startDate: dayjs().subtract(29, 'days'),
    endDate: dayjs()
  };
}

可选兼容方案（低版本组件适配） #

如果你使用的是较老版本的ngx-daterangepicker-material，赋值后仍未触发视图更新，可以手动调用组件更新方法：

1. 给html中的输入框添加模板引用：

<input type="text"
       #dateRangePicker="ngxDaterangepickerMd"
       ngxDaterangepickerMd
       [(ngModel)]="selected"
       <!-- 其余原有属性保持不变 -->
/>

2. 在ts中获取组件实例，手动触发更新：

import { ViewChild, AfterViewInit } from '@angular/core';
import { NgxDaterangepickerMdComponent } from 'ngx-daterangepicker-material';

export class CustomRangesComponent implements OnInit, AfterViewInit {
  @ViewChild('dateRangePicker') dateRangePicker: NgxDaterangepickerMdComponent;
  // ...其余原有代码

  ngAfterViewInit() {
    setTimeout(() => {
      this.dateRangePicker.updateView();
    }, 0);
  }
}

内容的提问来源于stack exchange，提问作者drn