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;
}
}
Could anyone help me to do that!
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.