I need to add a date range picker with previous dates disabled and the first n number of days from begin date in different color. Which means, if I select 13-12-2012 as begin date and n is 10, then from 13-12-2012 to 22-12-2021 should be in green color, but must be active.
my code is
<div class="input-box-container"> <input angular-mydatepicker [min]="minDateValue" style="display: none;" class="input-box" placeholder="Click to select a date" angular-mydatepicker name="mydate" (click)="dp.toggleCalendar()" [(ngModel)]="model" [options]="myDpOptions" #dp="angular-mydatepicker" (dateChanged)="onDateChanged($event)" (rangeDateSelection)="onRangeDateSelection($event)" /> </div>
component.ts
`onRangeDateSelection(event: IMyRangeDateSelection): void {
let { isBegin, date, jsDate } = event;
let options: IAngularMyDpOptions = this.getCopyOfOptions();
if (isBegin) {
this.ngxdp.writeValue({
isRange: true,
singleDate: null,
dateRange: {
beginDate: { year: 0, month: 0, day: 0 },
endDate: { year: 0, month: 0, day: 0 }
}
});
this.ngxdp.setHostValue('');
let d = new Date(jsDate.getTime());
let freeSlots = parseInt(this.freeSlotRange);
d.setDate(d.getDate() + parseInt(this.freeSlotRange));
options.disableDateRanges = [{ begin: { year: event.jsDate.getFullYear(), month: event.jsDate.getMonth() + 1, day: event.jsDate.getDate() },
end: { year: d.getFullYear(), month: d.getMonth() + 1, day: d.getDate() - 1 } }];
this.myDpOptions = options;
}
else {
// end date selection - remove disableSince option
options.disableSince = { year: 0, month: 0, day: 0 };
this.myDpOptions = options;
let d: Date = new Date();
let month: any = d.getMonth() + 1;
if (month < 10) {
month = '0' + month;
}
}
disableUntil() {
let d: Date = new Date();
d.setDate(d.getDate() - 1);
let copy: IAngularMyDpOptions = this.getCopyOfOptions();
copy.disableUntil = {
year: d.getFullYear(),
month: d.getMonth() + 1,
day: d.getDate()
};
this.myDpOptions = copy;
//this.disabledStyles('#fff', '#000');
}`
This will disable previous dates and also n number of days from begin date. But I don't want to disable the range dates, just need to change the background color. Also, now the previous dates and range dates are in same color, but I need to display both in different color.
I need to add a date range picker with previous dates disabled and the first n number of days from begin date in different color. Which means, if I select 13-12-2012 as begin date and n is 10, then from 13-12-2012 to 22-12-2021 should be in green color, but must be active. my code is
<div class="input-box-container"> <input angular-mydatepicker [min]="minDateValue" style="display: none;" class="input-box" placeholder="Click to select a date" angular-mydatepicker name="mydate" (click)="dp.toggleCalendar()" [(ngModel)]="model" [options]="myDpOptions" #dp="angular-mydatepicker" (dateChanged)="onDateChanged($event)" (rangeDateSelection)="onRangeDateSelection($event)" /> </div>component.ts `onRangeDateSelection(event: IMyRangeDateSelection): void { let { isBegin, date, jsDate } = event; let options: IAngularMyDpOptions = this.getCopyOfOptions(); if (isBegin) { this.ngxdp.writeValue({ isRange: true, singleDate: null, dateRange: { beginDate: { year: 0, month: 0, day: 0 }, endDate: { year: 0, month: 0, day: 0 } } }); this.ngxdp.setHostValue(''); let d = new Date(jsDate.getTime()); let freeSlots = parseInt(this.freeSlotRange); d.setDate(d.getDate() + parseInt(this.freeSlotRange)); options.disableDateRanges = [{ begin: { year: event.jsDate.getFullYear(), month: event.jsDate.getMonth() + 1, day: event.jsDate.getDate() }, end: { year: d.getFullYear(), month: d.getMonth() + 1, day: d.getDate() - 1 } }]; this.myDpOptions = options; } else { // end date selection - remove disableSince option options.disableSince = { year: 0, month: 0, day: 0 }; this.myDpOptions = options; let d: Date = new Date(); let month: any = d.getMonth() + 1; if (month < 10) { month = '0' + month; } }
}`
`getCopyOfOptions(): IAngularMyDpOptions { return JSON.parse(JSON.stringify(this.myDpOptions)); }
disableUntil() { let d: Date = new Date(); d.setDate(d.getDate() - 1); let copy: IAngularMyDpOptions = this.getCopyOfOptions(); copy.disableUntil = { year: d.getFullYear(), month: d.getMonth() + 1, day: d.getDate() }; this.myDpOptions = copy; //this.disabledStyles('#fff', '#000'); }`
This will disable previous dates and also n number of days from begin date. But I don't want to disable the range dates, just need to change the background color. Also, now the previous dates and range dates are in same color, but I need to display both in different color.