File size: 2,719 Bytes
f61d311 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
import { CdkVirtualScrollViewport } from "@angular/cdk/scrolling";
import {
ChangeDetectionStrategy,
Component,
EventEmitter,
Input,
Output,
ViewChild,
ViewEncapsulation
} from "@angular/core";
import * as moment from "moment";
/** @title DatePicker by Horizontal virtual scroll */
@Component({
selector: "horizontal-date-scroller",
styleUrls: ["scroller.css"],
templateUrl: "scroller.html",
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class HorizontalDateScroller {
items: any[] = [];
currentDate = new Date();
currentMonth = "";
stopDate = new Date();
selectedItem = null;
@Input() fromDate!: moment.Moment;
@Input() toDate!: moment.Moment;
@Output() dateChanged: EventEmitter<string> = new EventEmitter();
@ViewChild(CdkVirtualScrollViewport) viewPort!: CdkVirtualScrollViewport;
ngOnInit() {
// Creating an array with specified date range
this.items = this.getDates(this.fromDate, this.toDate);
const [lastItem] = this.items.slice(-1)
this.select(lastItem);
setTimeout (() => {
this.viewPort.scrollToIndex(this.items.indexOf(lastItem))
}, 1000);
}
// Common method to create an array of dates
getDates(fromDate: moment.Moment, toDate: moment.Moment) {
let dateArray: string[] = [];
// let endDate = moment();
let currentDate = fromDate;
while (currentDate <= toDate) {
dateArray.push(currentDate.format("YYYY-MM-DD"));
currentDate = moment(currentDate).add(1, "days");
}
return dateArray;
}
// Get the selected Date
select(item: any) {
this.selectedItem = item;
this.dateChanged.emit(moment(this.selectedItem).format("YYYY-MM-DD"))
}
// Method for changing Month
changeMonth(e: any) {
const offset = this.viewPort.measureScrollOffset("end")
const renderedRange = this.viewPort.getRenderedRange();
const renderedSize = this.viewPort.measureRangeSize(renderedRange)/(renderedRange.end - renderedRange.start)
const totalSize = this.items.length * renderedSize;
let indexNumer = Math.floor(((totalSize - offset)/totalSize) * this.items.length) - 1;
this.currentDate = this.items[indexNumer];
this.currentMonth = new Date(this.currentDate).toLocaleString("default", {month: "short"});
}
// Method to get the current weekday of the date showon
returnWeekDay(item: any) {
return moment(item, "YYYY-MM-DD").format("dddd").substring(0,3);
// return new Date(item).toLocaleDateString("default", { weekday: "short" });
}
}
|