how to change default value of ngx-daterangepicker-material?

Question

I am working on project and I found some difficulties in ngx-daterangepicker-material I want to change the default value of the calendar. it shows Today by default , I want to change it to Last 30 days (please see the picture below). I changed this.selectedDay in the constrictor but it doesnt work. Could anyone has any solution how to change the Today label to Last 30 days ! Here is it my code

html file

 <div class="row">
        <div class="col s6">
        <input type="text"
        ngxDaterangepickerMd
        [(ngModel)]="selected"
        [showCustomRangeLabel]="true"
        [alwaysShowCalendars]="alwaysShowCalendars"
        [ranges]="ranges"
        [showClearButton]="true"
        [showCancel]="true"
        [linkedCalendars]="true"
        [isTooltipDate] = "isTooltipDate"
        [isInvalidDate] = "isInvalidDate"
        [locale]="{applyLabel: 'Done'}"
        (rangeClicked)="rangeClicked($event)"
        (datesUpdated)="datesUpdated($event)"
        [keepCalendarOpeningWithRange]="keepCalendarOpeningWithRange"
        [showRangeLabelOnInput]="showRangeLabelOnInput"
        class="form-control"
        placeholder="Select please..."/>
      </div>
      <div class="col s6">
        <br/>
        <strong>Model: </strong>
        <br/> {{selected | json  }}
        <br> 

ts file

export class CustomRangesComponent implements OnInit {
  selected: any;
  alwaysShowCalendars: boolean;
  showRangeLabelOnInput: boolean;
  keepCalendarOpeningWithRange: boolean;
  maxDate: dayjs.Dayjs;
  minDate: dayjs.Dayjs;
  invalidDates: dayjs.Dayjs[] = [];
  tooltips = [
    {date: dayjs(), text: 'Today is just unselectable'},
    {date:  dayjs().add(2, 'days'), text: 'Yeeeees!!!'}
  ];
  inlineDateTime;
  ranges: any = {
    Today: [dayjs(), dayjs()],
    Yesterday: [dayjs().subtract(1, 'days'), dayjs().subtract(1, 'days')],
    'Last 7 Days': [dayjs().subtract(6, 'days'), dayjs()],
    'Last 30 Days': [dayjs().subtract(29, 'days'), dayjs()],
    'This Month': [dayjs().startOf('month'), dayjs().endOf('month')],
    'Last Month': [
      dayjs()
        .subtract(1, 'month')
        .startOf('month'),
      dayjs()
        .subtract(1, 'month')
        .endOf('month')
    ],
    'Last 3 Month': [
      dayjs()
        .subtract(3, 'month')
        .startOf('month'),
      dayjs()
        .subtract(1, 'month')
        .endOf('month')
    ]
  };

  isInvalidDate = (m: dayjs.Dayjs) =>  {
    return this.invalidDates.some(d => d.isSame(m, 'day') );
  }
  isTooltipDate = (m: dayjs.Dayjs) =>  {
    const tooltip = this.tooltips.find(tt => tt.date.isSame(m, 'day'));
    if (tooltip) {
      return tooltip.text;
    } else {
      return false;
    }
  }

  constructor() {
    this.maxDate = dayjs().add(2,  'weeks');
    this.minDate = dayjs().subtract(3, 'days');

    this.alwaysShowCalendars = true;
    this.keepCalendarOpeningWithRange = true;
    this.showRangeLabelOnInput = true;
    this.selected = {
      startDate: dayjs().subtract(1, 'days').set('hours', 0).set('minutes', 0),
      endDate: dayjs().subtract(1, 'days').set('hours', 23).set('minutes', 59)
    };
  }
  rangeClicked(range) {
    console.log('[rangeClicked] range is : ', range);
  }
  datesUpdated(range) {
    console.log('[datesUpdated] range is : ', range);
  }

  ngOnInit() {}
  choosedDateTime(e) {
    this.inlineDateTime = e;
  }
} 

enter image description here

Could anyone help me to do that!

Answer 1

I have figured it out - you have to initialize this.selected immediately when declaring it and then do not reassign this.selected with new object when changing start and end date. Change only the object properties.

//as component class attribute member, initialize when declaring
selected: any = { startDate: null, endDate: null };

// then you can change what you want in the constructor, ngOnInit() or wherever you want by accessing the object properties
//do not reassign  the object like this.selected = {} !
this.selected.startDate = moment().subtract(4, 'days').startOf('day');
this.selected.endDate = moment().subtract(1, 'days').startOf('day');

I am using moment but it should work with your dayjs lib as well.