使用NG-ZORRO中的Calendar组件结合moment.js实现日历切换

最新推荐文章于 2023-02-18 08:03:58 发布

HerayChen

最新推荐文章于 2023-02-18 08:03:58 发布

阅读量849

点赞数

分类专栏：笔记文章标签： js moment.js

本文链接：https://blog.csdn.net/qq_45832807/article/details/108801187

版权

笔记专栏收录该内容

145 篇文章 6 订阅

订阅专栏

在这里插入图片描述

<div class="settingHoliday">
    <i nz-icon nzType="left-circle" nzTheme="outline" (click)="onPage()"></i>
    <div class="calendar">
        <div *ngFor="let item of calendarList">
<!--            <span>{{item | date: 'yyyy-MM'}}</span>-->
            <nz-calendar
                [nzFullscreen]="false"
                (nzSelectChange)="selectChange($event)"
                [nzDateCell]="dateCellTpl"
                [ngModel]="item"
            >
            </nz-calendar>
            <ng-template #dateCellTpl let-date>
                <span [ngClass]="{'today': selectedDateMap.get(date|date: 'yyyy-MM-dd')}">{{ date | date:'d'}}</span>
            </ng-template>
        </div>
    </div>
    <i nz-icon nzType="right-circle" nzTheme="outline" (click)="nextPage()"></i>
</div>

import {Component, OnInit} from '@angular/core';
import * as moment from 'moment';
import {SpecialAttendService} from '../../services/attendance/special-attend.service';
import {AttendanceGroupService} from '../../services/attendance/attendance-group.service';

@Component({
    selector: 'app-setting-holiday',
    templateUrl: './setting-holiday.component.html',
    styleUrls: ['./setting-holiday.component.scss'],
})
export class SettingHolidayComponent implements OnInit {

    calendarList = [];
    /**
     * map方式存储选中id
     */
    selectedDateMap: Map<string, boolean> = new Map<string, boolean>();

    holidays: string[] = [];

    constructor(public attendanceGroupService: AttendanceGroupService) {
    }

    /*
    * 日历初始化绑定
    * */
    ngOnInit() {
        const date = moment();
        for (let i = 0; i < 6; i++) {
            this.calendarList.push(moment(date).add(i, 'month').format());
        }
        this.attendanceGroupService.getHolidayByYear('2020').subscribe(data => {
            this.holidays = data;
        });
    }


    /**
     * 选择事件
     */
    selectChange(date: Date): void {
        const selectTime = moment(date).format('YYYY-MM-DD');
        this.selectedDateMap.get(selectTime) ? this.selectedDateMap.delete(selectTime) :
            this.selectedDateMap.set(selectTime, true);
    }

    // 上一页
    onPage() {
        // 取当前列表开始时间作为上一页的结束时间
        const firstDate = moment(this.calendarList[0]);
        // 将列表置空
        this.calendarList = [];
        for (let i = 6; i > 0; i--) {
            this.calendarList.push(moment(firstDate).add(i * -1, 'month').format());
        }
    }

    // 下一页
    nextPage() {
        // 取当前列表的结束时间作为下一页的开始时间
        const startDate = moment(this.calendarList[this.calendarList.length - 1]);
        // 将列表置空
        this.calendarList = [];
        for (let i = 1; i <= 6; i++) {
            this.calendarList.push(moment(startDate).add(i, 'month').format());
        }
    }
}