Próbuję zrobić karuzelę z datami, która będzie się przewijała np. o jeden lub więcej dni (zależnie od ustalonej zmiennej). Widoczne jest 7 dni i dzisiejszy dzień jest wyświetlany na pozycji zależnie od numeru dnia tygodnia. Udało mi się zrobić przewijanie w prawo ale mam problem z przewijaniem wstecz, wtedy wszystkie daty się zmieniają a chciałbym żeby wcześniejsza data wskoczyła na pierwsze miejsce i się pojawiła po przewinięciu.
export class DatePickerComponent implements OnInit {
now: Date;
selectedDate: Date;
localeString: string = 'en';
visibleDates: Array<{ date: Date, index:number }> = [];
subscribedParam = "initial value";
constructor(private route: ActivatedRoute) {
this.now = new Date();
this.selectedDate = this.now;
this.prepareWeek();
}
ngOnInit() {
this.route.paramMap.subscribe(params => {
this.subscribedParam = params.get("date"); console.log(this.subscribedParam);
});
}
prepareWeek() {
var weekDaySelected = this.selectedDate.getDay();
for(let i=1; i <= 9; i++) {
var weekDay = weekDaySelected - i;
this.visibleDates[i-1] = {date: new Date(), index: i-1};
this.visibleDates[i-1].date.setDate(this.selectedDate.getDate() - weekDay-1);
};
}
slideDate(direction: string) {
var datesList = document.querySelector('.carousel-list');
var dateItem = document.querySelector('.date-item');
var listPosition = parseFloat(window.getComputedStyle(datesList).getPropertyValue("left"));
var dateItemWidth = parseFloat(window.getComputedStyle(dateItem).getPropertyValue("width"));
if (direction == 'forward') {
listPosition = listPosition - dateItemWidth;
} else {
listPosition = listPosition + dateItemWidth;
}
(datesList as HTMLElement).style.left = (listPosition)+'px';
var sizeOfList = this.visibleDates.length;
if (direction == 'forward') {
this.visibleDates[sizeOfList] = Object.assign({}, this.visibleDates[sizeOfList - 1]);
this.visibleDates[sizeOfList].date = new Date(this.visibleDates[sizeOfList - 1].date.setDate(this.visibleDates[sizeOfList - 1].date.getDate() + 1));
} else {
this.visibleDates.unshift(Object.assign({}, this.visibleDates[0]));
this.visibleDates[0].date = new Date(this.visibleDates[1].date.setDate(this.visibleDates[1].date.getDate() - 1));
}
this.visibleDates[sizeOfList].index = sizeOfList;
sizeOfList++;
}
}
<div class="carousel js-carousel">
<div class="carousel-nav">
<button class="carousel-button-prev js-carousel-button" (click)="slideDate('backward')" data-dir="prev"><</button>
</div>
<div class="carousel-container js-carousel-container">
<div class="carousel-list js-carousel-list">
<a class="plan-date date-item js-carousel-item" *ngFor="let item of visibleDates" [ngClass]="{'selectedDate': item.date|date:'MM-dd'=='11-11'}" [routerLink]="['/todays-plan',item.date|date:'dd-MM-yyyy']" routerLinkActive="router-link-active" >
{{item.date|date:'MM-dd'}}
</a>
</div>
</div>
<div class="carousel-nav">
<button class="carousel-button-next js-carousel-button" (click)="slideDate('forward')" data-dir="next">></button>
</div>
</div>
.carousel
{
background-color: #343a40;
color: #fff;
box-sizing: border-box;
width: 100%;
display: flex;
margin: 0 auto;
}
.carousel-container
{
height:40px;
padding: 2px;
width: 380px;
overflow: hidden;
flex: 1 1 400px;
}
.carousel-list
{
left: calc(-100%/7);
box-sizing: border-box;
width: 100%;
position: relative;
white-space: nowrap;
transition: .5s ease-in-out;
height: 100%;
}
.date-item
{
color: #fff;
width: calc(100%/7);
display: inline-block;
border: 1px solid #fff;
text-align: center;
background: rgb(52,58,64);
transition: .1s ease-in-out;
line-height: 40px;
}
.router-link-active,
.date-item:hover,
.date-item:active
{
color: #F3C622;
background: #23212C;
}
.carousel-nav
{
height:40px;
padding: 2px;
}
.carousel-button-prev,
.carousel-button-next
{
background: inherit;
color: #fff;
line-height: 100%;
font-size: 200%;
height: 100%;
border: none;
margin:1px;
transition: .1 ease-in-out;
}
.carousel-button-prev:hover,
.carousel-button-next:hover,
.carousel-button-prev:active,
.carousel-button-next:active
{
background: inherit;
color: #F3C622;
}
Angular 