时间戳

首页 > 解决方案 > 如何更改 ngx-daterangepicker-material 的默认值？

html - 如何更改 ngx-daterangepicker-material 的默认值？

问题描述

我正在做项目，我在 ngx-daterangepicker-material 中发现了一些困难，我想更改日历的默认值。它默认显示今天，我想将其更改为过去 30 天（请参见下图）。我在 constrictor 中更改了 this.selectedDay 但它不起作用。谁能有任何解决方案如何将 Today 标签更改为 Last 30 days ！这是我的代码

.html 文件

 <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文件

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;
  }
}

在此处输入图像描述

谁能帮我做到这一点！

标签： htmlangulartypescriptngx-daterangepicker-material

解决方案

我已经想通了 - 你必须this.selected 在声明它时立即初始化，然后在更改开始和结束日期时不要重新分配新对象。 this.selected仅更改对象属性。


//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');

我正在使用moment，但它也应该与您的dayjs库一起使用。

推荐阅读