版权声明：本文为博主原创文章，转载需注明来源 https://blog.csdn.net/fsxxzq521/article/details/80845802
只是一个很简单的日历。
HTML
采用table表格来展示日历。通常日历总共是7*7的表格。这样也方便数据的展示。
<div class="left-cal">
<div class='datapicker'>
<div class="datepickTitle">
<i class="iconfont icon-dobble-left" (click)="behindyear()"></i>
<i class="iconfont icon-play-copy" (click)="behindMonth()"></i>
<span>{{today}}</span>
<i class="iconfont icon-play" (click)="nextMonth()"></i>
<i class="iconfont icon-youshuangjiantou" (click)="nextyear()"></i>
</div>
<table class="dateTable">
<tr>
<td *ngFor="let weekitem of weekday">
{{weekitem}}
</td>
</tr>
<tr>
<td *ngFor="let firstday of firstDatarows" (click)="clickDay($event)" [class.hover]="firstday==date&&finalday==month&&slectYear==year"
[class.slectday]="selectday==firstday&&selectday!==''">
{{firstday}}
</td>
</tr>
<tr>
<td *ngFor="let seconday of secondDatarows" (click)="clickDay($event)" [class.hover]="seconday==date&&finalday==month&&slectYear==year"
[class.slectday]="selectday==seconday">
{{seconday}}</td>
</tr>
<tr>
<td *ngFor="let threeday of threeDatarows" (click)="clickDay($event)" [class.hover]="threeday==date&&finalday==month&&slectYear==year"
[class.slectday]="selectday==threeday">{{threeday}}</td>
</tr>
<tr>
<td *ngFor="let fourday of fourDatarows" (click)="clickDay($event)" [class.hover]="fourday==date&&finalday==month&&slectYear==year"
[class.slectday]="selectday==fourday">{{fourday}}</td>
</tr>
<tr>
<td *ngFor="let fiveday of fiveDatarows" (click)="clickDay($event)" [class.hover]="fiveday==date&&finalday==month&&slectYear==year"
[class.slectday]="selectday==fiveday">{{fiveday}}</td>
</tr>
<tr>
<td *ngFor="let sixday of sixDatarows" (click)="clickDay($event)" [class.hover]="sixday==date&&finalday==month&&slectYear==year"
[class.slectday]="selectday==sixday">{{sixday}}</td>
</tr>
</table>
</div>
</div>
TS部分
使用一个date对象，操作也只针对这一个date对象。
1.服务部分(粗浅操作,可使用date-fans)
/**
* 获取日期
*/
getData(){
let myDate=new Date();
return{
get:(){
return myDate;
},
set:(date){
myDate=date;
},
}
}
2.ts
主要使用7个数组来存放每一行的数据，后续继续优化。展示日历主要是要获取每个月的第一天是星期几。以及每个月是几天。在确定每个月的第一天是星期几以后
import { ActivatedRoute } from '@angular/router';
import { UtilService } from './../services/util.service';
import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';
@Component({
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.scss'],
host: {
'[class.right_content]': "true",
}
})
export class ListComponent implements OnInit {
day = new Date();
// 存放所有日期
firstDatarows = []
secondDatarows = []
threeDatarows = []
fourDatarows = []
fiveDatarows = []
sixDatarows = []
allDateRows = [];
// 当前日期
today: string;
finalday:number;
// 当前月
month: number;
// 当前年
date:number;
year: number;
weekday = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
constructor(
private api: ApiService,
private route: ActivatedRoute,
private dateService: UtilService
) { }
ngOnInit() {
this.month = this.dateService.getData().get().getMonth();
this.finalday = this.month;
this.year = this.dateService.getData().get().getFullYear();
this.slectYear = this.year;
this.date = this.dateService.getData().get().getDate();
this.today = `${this.year}年${(this.month + 1 > 9) ? this.month + 1 : `0${this.month + 1}`}月`;
this.dateTableList();
}
/**
* 上个月
*/
behindMonth() {
this.month--;
if (this.month < 0) {
this.month = 11;
this.today = `${--this.year}年${(this.month + 1 > 9) ? this.month + 1 : `0${this.month + 1}`}月`;
this.changeDateTable(this.year, this.month);
} else {
this.today = `${this.year}年${(this.month + 1 > 9) ? this.month + 1 : `0${this.month + 1}`}月`;
this.changeDateTable(this.year, this.month);
}
}
/**
* 上一年
*/
behindyear() {
this.year--;
this.today = `${this.year}年${(this.month + 1 > 9) ? this.month + 1 : `0${this.month + 1}`}月`;
this.changeDateTable(this.year, this.month);
}
/**
* 改变日期表格
*/
changeDateTable(year, month) {
const firstday = new Date(year, month, 1);
const finallday = new Date(year, month + 1, 0);
const beforeday = new Date(year, month, 0);
let daycount = beforeday.getDate();
for (let i = 1; i <= finallday.getDate(); i++) {
this.allDateRows.push(i);
}
this.firstDatarows = this.allDateRows.splice(0, 7 - firstday.getDay());
for (let i = 0; i < firstday.getDay(); i++) {
this.firstDatarows.unshift('');
daycount--;
}
this.secondDatarows = this.allDateRows.splice(0, 7);
this.threeDatarows = this.allDateRows.splice(0, 7);
this.fourDatarows = this.allDateRows.splice(0, 7);
this.fiveDatarows = this.allDateRows.splice(0, 7);
this.sixDatarows = this.allDateRows.splice(0);
}
/**
* 表格列表
*/
dateTableList() {
const mydate = this.dateService.getData().get();
const firstday = new Date(mydate.getFullYear(), mydate.getMonth(), 1);
const finallday = new Date(mydate.getFullYear(), mydate.getMonth() + 1, 0);
const beforeday = new Date(mydate.getFullYear(), mydate.getMonth(), 0);
let daycount = beforeday.getDate();
for (let i = 1; i <= finallday.getDate(); i++) {
this.allDateRows.push(i);
}
for (let i = 0; i < firstday.getDay(); i++) {
this.allDateRows.unshift('');
daycount--;
}
this.firstDatarows = this.allDateRows.splice(0, 7);
this.secondDatarows = this.allDateRows.splice(0, 7);
this.threeDatarows = this.allDateRows.splice(0, 7);
this.fourDatarows = this.allDateRows.splice(0, 7);
this.fiveDatarows = this.allDateRows.splice(0, 7);
this.sixDatarows = this.allDateRows.splice(0, 7);
}
/**
* 下一年
*/
nextyear() {
this.year++;
this.today = `${this.year}年${(this.month + 1 > 9) ? this.month + 1 : `0${this.month + 1}`}月`;
this.changeDateTable(this.year, this.month);
}
/**
* 下个月
*/
nextMonth() {
this.month++;
if (this.month > 11) {
this.month = 0;
this.today = `${++this.year}年${(this.month + 1 > 9) ? this.month + 1 : `0${this.month + 1}`}月`;
this.changeDateTable(this.year, this.month);
} else {
this.today = `${this.year}年${(this.month + 1 > 9) ? this.month + 1 : `0${this.month + 1}`}月`;
this.changeDateTable(this.year, this.month);
}
}
}
scss
.left-cal {
width: 100%;
padding-top: 27px;
.datapicker {
height: 342px;
display: flex;
padding: 0px 28px;
align-items: center;
flex-direction: column;
.datepickTitle {
display: flex;
justify-content: center;
span {
font-size: 18px;
font-family: PingFang-SC-Bold;
outline: none;
padding: 0px 18px
}
i {
outline: none;
font-size: 18px;
padding-left: 5px;
}
}
table {
width: 100%;
height: 308px;
color: #4693FF;
cursor: pointer;
tr:first-child {
text-align: center;
height: 38px;
width: 320px;
td {
color: #555 !important;
}
}
tr:not(:first-child) {
text-align: center;
height: 38px;
width: 320px;
}
td {
padding: 3px;
line-height: 39px;
color: #005555;
}
}
}
}
最终效果
