angular ts 开发日程表，周日程/月日程
项目基于angular 开发， ui 控件使用 nz-zorro ui NG-ZORRO
实现功能
1.周日程，展示当前周，上一周/下一周切换，显示阴历时间，表格内容按横向当天，纵向时间轴定位，高亮当前日期，时间轴初始化跳转当前时间
2.月日程，切换月份，高亮当前日期，表格内容按照时间天定位
所有的css
.task_list {
flex: 7;
}
.time_title {
flex: 1;
margin: 5px auto;
text-align: center;
}
.time_box {
display: flex;
align-items: center;
justify-content: center;
}
.time_time {
font-size: 15px;
font-weight: 500;
margin: 0 15px;
}
table tbody {
display: block;
max-height: 460px;
overflow-y: scroll;
}
table thead, tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
table thead {
width: calc(100% - 5px);
}
.table_task {
text-align: center;
background-color: #ffffff;
width: 100%;
border-collapse: collapse;
}
.t_header_th{
background-color: #0e6cf9d6;
color: white;
border-radius: 8px;
}
.t_tbody_time{
background-color: #0e6cf9d6;
color: white;
border-radius: 8px;
}
th {
height: 50px;
border: 1px #D2D2D282 solid;
}
td {
height: 50px;
border: 1px #D2D2D282 solid;
}
.td_header{
border-top:none;
border-bottom:none;
position: relative;
width: 40px;
}
.t_none_time {
height: 12px;
}
.time_axle{
position: absolute;
right: 0;
left: 0;
bottom: -10px;
font-size: 12px;
}
.task_card{
display: flex;
align-items: stretch;
}
.task_body{
color: white;
border-radius: 4px;
overflow: auto;
font-size: 12px;
}
.task_color{
color: white;
cursor: pointer;
}
.task_card_content{
flex: 4;
text-align: left;
}
.task_card_btn{
flex: 1;
background-color: #7c95ff;
}
.task_name_box{
padding: 1px 3px;
}
.td_month_height{
height: 75px;
}
.month_day{
text-align: left;
margin: 2px 5px;
}
.month_time{
color: white;
background-color: #368dff;
border-radius: 50%;
width: 23px;
text-align: center;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-thumb {
background: #368dff;
border-radius: 10px;
}
::-webkit-scrollbar-track-piece {
background: transparent;
}
1.周日程
html
<div class="task_list">
<div class="flex">
<div class="time_title"></div>
<div class="time_title time_box">
<div class="time_time">{{nowTime.year}}年{{nowTime.month}}月</div>
<nz-button-group [nzSize]="'small'">
<button class="button-size" nz-button nzType="primary" [nzSize]="'small'" (click)="dateChangeFn('up')" [nzLoading]="searchLoading"><span nz-icon nzType="left" nzTheme="outline"></span></button>
<button class="button-size" nz-button nzType="primary" [nzSize]="'small'" (click)="dateChangeFn('down')" [nzLoading]="searchLoading"><span nz-icon nzType="right" nzTheme="outline"></span></button>
</nz-button-group>
</div>
<div class="time_title">
<nz-date-picker *ngIf="tableType == 'month'" [(ngModel)]="nowMonth" nzMode="month" [nzSize]="'small'" [nzPlaceHolder]="'选择月份'" (ngModelChange)="getMonthChange('change',$event)"></nz-date-picker>
<button class="button-size ml-sm mr-sm" nz-button nzType="primary" [nzSize]="'small'" (click)="dateChangeFn('ref')" [nzLoading]="searchLoading">今日</button>
<nz-radio-group [(ngModel)]="tableType" nzButtonStyle="solid" nzSize="small" (ngModelChange)="dateChangeFn('ref')" >
<label style="font-size: 12px" nz-radio-button nzValue="week">周</label>
<label style="font-size: 12px" nz-radio-button nzValue="month">月</label>
</nz-radio-group>
</div>
</div>
<div style="border: 1px solid #D2D2D282">
<!--周日程-->
<table *ngIf="tableType == 'week'" class="table_task">
<thead>
<tr>
<th style="text-align: center;width: 40px;background-color: aliceblue;"></th>
<th *ngFor="let time of headerTime;let index = index" style="text-align: center;font-size: 12px">
<div [class.t_header_th]="time.time | taskTimeColor:'day'">
<div>{{time.weekName}}</div>
<div>{{time.dayName}}</div>
<div>{{time.lunarName}}</div>
</div>
</th>
</tr>
</thead>
<tbody id=tbodyCard>
<tr style="height: 12px;">
<td class="td_header t_none_time">
<div class="time_axle">
00:00
</div>
</td>
<td colspan="7" style="height: 12px;"></td>
</tr>
<tr *ngFor="let trData of borderList; let i = index">
<td class="td_header">
<div class="time_axle" [class.t_tbody_time]="trData.timeH | taskTimeColor:'time'">
{{trData.timeHour}}
</div>
</td>
<td *ngFor="let td of trData.task; let j = index">
<div *ngIf="td.dataList.length>0" class="task_color">
<div *ngIf="!td.showMore" class="task_card task_body">
<div class="task_card_content" [style]="{ 'background-color':'#8c8c8c' }" (click)="gotoTask(td.dataList[0])">
<div class="task_name_box">{{td.dataList[0].TaskTypeName}}</div>
<div class="task_name_box"><ellipsis length="4" tooltip>{{td.dataList[0].CustomerName}}</ellipsis></div>
</div>
<div *ngIf="td.dataList.length>1" class="task_card_btn" (click)="showMoreChange(td)">
更多
<div><span nz-icon nzType="down" nzTheme="outline"></span></div>
</div>
</div>
<div *ngIf="td.showMore">
<div class="task_body" *ngFor="let taskItem of td.dataList; let k = index" style="margin-bottom: 2px;">
<div class="task_card_content" [style]="{ 'background-color':'#8c8c8c'}" (click)="gotoTask(taskItem)">
<div class="task_name_box">{{taskItem.TaskTypeName}}</div>
<div class="task_name_box"><ellipsis length="5" tooltip>{{taskItem.CustomerName}}</ellipsis></div>
</div>
</div>
<div *ngIf="td.dataList.length>1" class="task_card_btn task_body">
<div (click)="showMoreChange(td)">收起<span nz-icon nzType="up" nzTheme="outline"></span></div>
</div>
</div>
</div>
</td>
</tr>
<tr style="height: 12px;">
<td class="td_header t_none_time">
</td>
<td colspan="7" style="height: 12px;"></td>
</tr>
</tbody>
</table>
<!--月日程-->
<table *ngIf="tableType == 'month'" class="table_task" >
<thead>
<tr>
<th *ngFor="let week of monthUseWeek;let indexW = indexW" style="text-align: center;font-size: 12px">
<div>周{{week}}</div>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let trDataM of borderMonthList; let iM = index">
<td class="td_month_height" *ngFor="let tdM of trDataM; let jM = index">
<div style="height: 100%">
<div class="month_day"><div [class.month_time]="tdM.date | taskTimeColor:'day'">{{tdM.day}}</div></div>
<div *ngIf="!tdM.showMore" class="task_card task_body">
<div class="task_card_content" [style]="{ 'background-color':'#8c8c8c' }" (click)="gotoTask(tdM.dataList[0])">
<div class="task_name_box">{{tdM.dataList[0]?.TaskTypeName}}</div>
<div class="task_name_box"><ellipsis length="4" tooltip>{{tdM.dataList[0]?.CustomerName}}</ellipsis></div>
</div>
<div *ngIf="tdM.dataList.length>1" class="task_card_btn" (click)="showMoreChange(tdM)">
更多
<div><span nz-icon nzType="down" nzTheme="outline"></span></div>
</div>
</div>
<div *ngIf="tdM.showMore">
<div class="task_body" *ngFor="let taskItem of tdM.dataList; let k = index" style="margin-bottom: 2px;">
<div class="task_card_content" [style]="{ 'background-color':'#8c8c8c' }" (click)="gotoTask(taskItem)">
<div class="task_name_box">{{taskItem.TaskTypeName}}</div>
<div class="task_name_box"><ellipsis length="5" tooltip>{{taskItem.CustomerName}}</ellipsis></div>
</div>
</div>
<div *ngIf="tdM.dataList.length>1" class="task_card_btn task_body">
<div (click)="showMoreChange(tdM)">收起<span nz-icon nzType="up" nzTheme="outline"></span></div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
export class TestModalComponent implements OnInit {
constructor(
private modalHelper: ModalHelper,
) { }
// allChecked = false;
// allCheckedUser = false;
// indeterminate = false;
// indeterminateUser = false;
// checkOptionsOne = [];
// checkOptionsUser = [];
monthUseWeek:any[] =["日", "一", "二", "三", "四", "五", "六"];
count:number=0
ngOnInit(): void {
// 初始化 -> 创建时间轴 -> 获取周数据
for (let i = 1; i <= 24; i++) {
let hour = i<10?('0'+i+':'+'00'):(i+':'+'00') //用于构造时间轴展示的时间
this.borderList.push({timeHour:hour,timeH:i,task:[{day:'',dataList:[]}]}) //timeH 用于循环插入数据时进行比较的时间
}
this.getTableHeaderTime(0)
}
// 获取周数据
headerTime:any[]=[];
nowTime:any = {year:'', month:''};
borderList:any[]=[];
getTableHeaderTime(page){
let timeWeekNum = weekTime(page) // 返回一周时间戳，数组结构 ，
this.headerTime = timeWeekNum.map(item=>{
return {
weekName:getWeekNameByTime(item),
dayName:new Date(item).getDate(),
lunarName:dateLunar(item), // 获取农历
time:item,
}
})
this.nowTime = {
year:new Date(this.headerTime[3].time).getFullYear(),
month:new Date(this.headerTime[3].time).getMonth()+1
}
// 组装表格内时间轴内容
this.borderList = this.borderList.map(item=>{
return{
timeHour:item.timeHour,
timeH:item.timeH,
task:this.headerTime.map(i=>{return {day:i.dayName,dataList:[],showMore:false}})
}
})
this.getTaskList(true)
}
tableType:string = 'week';
borderMonthList:any[]=[];
searchLoading:boolean = false;
taskList:any[] = [];
getTaskList(isRefCheck:boolean){
// 每次请求前先清空上次查询任务
if (this.tableType == 'week'){
this.borderList.forEach(item=>{
item.task.forEach((j)=>{
j.dataList = []
})
})
}
if (this.tableType == 'month'){
this.borderMonthList.forEach((item)=>{
item.forEach(j=>{
j.dataList = []
j.showMore = false;
})
})
}
// 模拟调取接口
this.searchLoading = true;
setTimeout(()=>{
//接口返回数据类型
let res = {
Data:[
{TaskTemplateId:1,TaskTypeName:'任务1',Id:'1',CustomerName:'内容11',DistributionTime:"2022-10-09T09:48:46"},
{TaskTemplateId:2,TaskTypeName:'任务2',Id:'2',CustomerName:'内容22',DistributionTime:"2022-10-09T09:48:46"},
{TaskTemplateId:2,TaskTypeName:'任务5',Id:'5',CustomerName:'内容55',DistributionTime:"2022-10-09T09:58:46"},
{TaskTemplateId:3,TaskTypeName:'任务3',Id:'3',CustomerName:'内容33',DistributionTime:"2023-10-08T10:48:46"},
{TaskTemplateId:4,TaskTypeName:'任务4',Id:'4',CustomerName:'内容44',DistributionTime:"2022-10-07T11:48:46"}
]
}
//接口数据处理
if(isNotNullOrUndefined(res.Data) && res.Data.length != 0){
//总数
this.count = res.Data.length
let taskListRes = res.Data
if (this.tableType == 'week'){
// 周数据，此处将接口返回的数据按照 相同任务 -> 同一时间段 归类
taskListRes.forEach((i)=>{
let dayI = new Date(i.DistributionTime).getDate()
let hourI = new Date(i.DistributionTime).getHours()
taskListRes.forEach((j,jIndex)=>{
j.Id = j.Id.toString()
let dayJ = new Date(j.DistributionTime).getDate()
let hourJ = new Date(j.DistributionTime).getHours()
if((dayI == dayJ && hourI == hourJ && i.TaskTemplateId == j.TaskTemplateId) && i.Id != j.Id){
i.Id = i.Id+','+j.Id
i.CustomerName = i.CustomerName+','+j.CustomerName
taskListRes.splice(jIndex, 1);
}
})
})
}else if(this.tableType == 'month'){
// 月数据，此处将接口返回的数据按照 相同任务 -> 同一天段 归类
taskListRes.forEach((i)=>{
let dayMI = new Date(i.DistributionTime).getDate()
// let hourMI = new Date(i.DistributionTime).getHours()
taskListRes.forEach((j,jIndex)=>{
let dayMJ = new Date(j.DistributionTime).getDate()
// let hourMJ = new Date(j.DistributionTime).getHours()
j.Id = j.Id.toString()
if((dayMI == dayMJ && i.TaskTemplateId == j.TaskTemplateId) && i.Id != j.Id){
i.Id = i.Id+','+j.Id
i.CustomerName = i.CustomerName+','+j.CustomerName
taskListRes.splice(jIndex, 1);
}
})
})
}
this.taskList = taskListRes
if(isRefCheck){
// 刷新勾选框数据
// 此处是根据特殊需求对接口返回数据进行去重，遍历出勾选框数据，与日程表无关
this.getCheckedList(this.taskList)
}
if(this.tableType == 'week'){
this.taskList.forEach(item=>{
let taskDay = new Date(item.DistributionTime).getDate()
// let taskTime = format(new Date(item.DistributionTime),DateConstant.FORMAT_TIME)
let taskH = new Date(item.DistributionTime).getHours()+1
this.borderList.forEach(taskItem=>{
if(taskH == taskItem.timeH){
taskItem.task.forEach(timeWeek=>{
if(taskDay == timeWeek.day){
timeWeek.dataList.push(item)
}
})
}
})
})
}else if(this.tableType == 'month'){
this.taskList.forEach(item=>{
let taskDay = new Date(item.DistributionTime).getDate()
let taskMonth = new Date(item.DistributionTime).getMonth()
this.borderMonthList.forEach(weekTrItem=>{
weekTrItem.forEach((dayItem)=>{
let dayTime = new Date(dayItem.date).getDate()
let monthTime = new Date(dayItem.date).getMonth()
if(taskDay == dayTime && taskMonth == monthTime){
dayItem.dataList.push(item)
}
})
})
})
}
this.searchLoading = false;
}
if(isRefCheck){
this.setScrollH()
}
},1000)
}
//赋值滚动条高度，根据当前时间将 时间轴置为当前高度
// 重新赋值滚动条高度
setScrollH(){
const nowScrollHeight = document.getElementById('tbodyCard')?.scrollTop;
if(isNotNullOrUndefined(nowScrollHeight)){
let newHours = new Date().getHours()
let scrollHeightTop = newHours*50-200>0?newHours*50-100:0
setTimeout(()=>{
document.getElementById('tbodyCard').scrollTop = scrollHeightTop
},300)
}
}
dateChangeFn(changType){
if (this.tableType == 'week'){
this.weekChecked(changType)
}else if(this.tableType == 'month'){
this.getMonthChange(changType)
}
}
currentWeek:number = 0;
// 按周切换
weekChecked(type){
if(type == 'up'){
this.currentWeek = this.currentWeek-1
}else if (type == 'down'){
this.currentWeek = this.currentWeek+1
}else if (type == 'ref'){
this.currentWeek = 0
}
this.getTableHeaderTime(this.currentWeek)
}
// 获取当前月份第一天
// 初始化当前月份并记录，月份切换后记录
nowMonth:any = format(new Date(), 'yyyy-MM')
getMonthChange(type,monthValue?){//type=='now' 初始话当前月，up上一月，down 下一月
let nowMonthDate = format(new Date(this.nowMonth), 'yyyy-MM')
if (type == 'up'){
this.nowMonth = format(new Date(new Date(nowMonthDate).getFullYear(),new Date(nowMonthDate).getMonth() - 1, new Date(nowMonthDate).getDate()),'yyyy-MM')
}else if(type == 'down'){
this.nowMonth = format(new Date(new Date(nowMonthDate).getFullYear(),new Date(nowMonthDate).getMonth() + 1, new Date(nowMonthDate).getDate()),'yyyy-MM')
}else if (type == 'ref'){
this.nowMonth = format(new Date(), 'yyyy-MM')
}else if (type == 'change'){
this.nowMonth = format(monthValue, 'yyyy-MM')
}
// 表头时间更新
this.nowTime = {
year:new Date(this.nowMonth).getFullYear(),
month:new Date(this.nowMonth).getMonth()+1
}
let monthDateAll = getMonthList(new Date(this.nowMonth)).map((item)=>{
return {
date:format(new Date(item), 'yyyy-MM-dd'),
day:new Date(item).getDate(),
dataList:[],
showMore:false
}
})
let newListArr = []
for(let i = 0;i<monthDateAll.length;i+=7){
newListArr.push(monthDateAll.slice(i,i+7))
}
this.borderMonthList = newListArr
this.getTaskList(true)
}
//
getCheckedList(taskList){
// this.allChecked = false;
// this.allCheckedUser = false;
// this.indeterminate = false;
// this.indeterminateUser = false;
// if (isNotNullOrUndefined(taskList) && taskList.length>0){
// this.checkOptionsOne = taskList.map(item=>{
// return {
// value:item.TaskTemplateId,
// label:item.TaskTypeName,
// checked:false
// }
// })
// //去重
// let map = new Map();
// for (let item of this.checkOptionsOne) {
// if (!map.has(item.value)) {
// map.set(item.value, item);
// }
// }
// this.checkOptionsOne = [...map.values()];
// }else{
// this.checkOptionsOne = []
// }
// this.checkOptionsUser = this.checkOptionsUser.map(item=>{
// return {
// value:item.value,
// label:item.label,
// checked:false
// }
// })
}
// 业务处理
gotoTask(task){
//todo
}
// 标签内容展开关闭
showMoreChange(value){
value.showMore = !value.showMore
}
}
创建公用方法function
/**
* 根据时间戳获取星期
* @param time
*/
export function getWeekNameByTime(time){
if (time){
let a = ["日", "一", "二", "三", "四", "五", "六"];
let week = new Date(time).getDay();
return "周"+ a[week];
}
return ''
}
/**
*根据时间戳获取农历时间
*/
export function dateLunar(time){
/**获取农历 start*/
let nyear;
let nmonth;
let nday = -1;
let nwday;
let nhrs;
let nmin;
let nsec;
let lmonth, lday, lleap; //农历参数
let nStr1 = ['', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'];
let nStr2 = ['初', '十', '廿', '卅', '□'];
//辅助函数
let NewTick = (time)=> {
let noww = new Date(time);
if (noww.getDate() != nday) {
nyear = noww.getFullYear();
nmonth = noww.getMonth() + 1;
nwday = noww.getDay();
nday = noww.getDate();
getlunar(); //获取农历
}
nhrs = noww.getHours();
nmin = noww.getMinutes();
nsec = noww.getSeconds();
}
function Lunar(y, m, d) {
let i, leap: number,
temp = 0;
let offset = (Date.UTC(y, m, d) - Date.UTC(1900, 0, 31)) / 86400000;
for (i = 1900; i < 2050 && offset > 0; i++) {
temp = lYearDays(i);
offset -= temp;
}
if (offset < 0) {
offset += temp;
i--;
}
this.year = i;
leap = leapMonth(i);
this.isLeap = false;
for (i = 1; i < 13 && offset > 0; i++) {
if (leap > 0 && i == (leap + 1) && this.isLeap == false) {--i;
this.isLeap = true;
temp = leapDays(this.year);
} else {
temp = monthDays(this.year, i);
}
if (this.isLeap == true && i == (leap + 1)) this.isLeap = false;
offset -= temp;
}
if (offset == 0 && leap > 0 && i == leap + 1) if (this.isLeap) {
this.isLeap = false;
} else {
this.isLeap = true; --i;
}
if (offset < 0) {
offset += temp; --i;
}
this.month = i;
this.day = offset + 1;
}
function GetcMon(m) {
if (m == 1) return '正';
else return nStr1[m];
}
let GetcDay = (d)=> {
let s;
switch (d) {
case 10:
s = '初十';
break;
case 20:
s = '二十';
break;
case 30:
s = '三十';
break;
default:
s = nStr2[Math.floor(d / 10)];
s += nStr1[d % 10];
break;
}
return (s);
}
let getlunar = ()=> {
let lObj = new Lunar(nyear, nmonth - 1, nday);
lmonth = GetcMon(lObj.month);
lday = GetcDay(lObj.day);
lleap = lObj.isLeap;
if (lleap == 1) {
lmonth = "闰" + lmonth;
}
return
}
//农历函数开始
let lunarInfo = [0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, 0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, 0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, 0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, 0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, 0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, 0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, 0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, 0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, 0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x05ac0, 0x0ab60, 0x096d5, 0x092e0, //1990
0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, 0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, 0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, 0x05aa0, 0x076a3, 0x096d0, 0x04bd7, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, 0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, 0x14b63];
function lYearDays(y) {
let i, sum = 348;
for (i = 0x8000; i > 0x8; i >>= 1) sum += (lunarInfo[y - 1900] & i) ? 1 : 0;
return (sum + leapDays(y));
}
function leapDays(y) {
if (leapMonth(y)) return ((lunarInfo[y - 1900] & 0x10000) ? 30 : 29);
else return (0);
}
function leapMonth(y) {
return (lunarInfo[y - 1900] & 0xf);
}
function monthDays(y, m) {
return ((lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29);
}
NewTick(time);
return lmonth + "月" + lday;
}
/**
* 获取一周的时间
* @param num num为0时表示当前周，递增或递减时周数也递增或递减， 1 下一周 -1.上一周
*/
export function weekTime(num) {
let currentFirstDate
let formatDate = (date)=>{
// let year = date.getFullYear() + "-";
// let month = date.getMonth() + 1 + "-";
return date.getTime();
}
let addDate = (date,n)=>{
date.setDate(date.getDate() + n);
return date;
}
let setDateFn = (date)=>{
let week = date.getDay();
date = addDate(date, week * -1);
currentFirstDate = new Date(date);
let arr = [];
for (let i = 0; i < 7; i++) {
let a = formatDate(i == 0 ? date : addDate(date, 1)); //星期一开始
arr.push(a);
}
return arr;
}
// setDateFn(new Date());
return setDateFn(addDate(new Date(), 7 * num));
}
/**
* 获取到一个月 月表前后补齐天数
* @param date
*/
export function getMonthList(date){
// 获取本月第一天
let getMonthDay =(date)=>{
date=new Date(date.valueOf())
date.setDate(1);
return date
}
// 获取本月最后一天
let getMonthLastDay = (date)=>{
date=new Date(date.valueOf())
date.setMonth(date.getMonth()+1);
date.setDate(0);
return date
}
//获取本月的时间对象集合
let arr = []
// 获取本月第一天
let _date = getMonthDay(date)
// // 获取本月最后一天
let dataLast = getMonthLastDay(date).getDate()
arr.push(new Date(_date.valueOf()))
// 处理本月第一天 到本月最后一天
for (let i = 1; i < dataLast; i++) {
_date.setDate(_date.getDate() + 1)
arr.push(new Date(_date.valueOf()))
}
// 向前补全，重置为本月一号
_date=getMonthDay(date)
let forln=_date.getDay()
for(let i=0;i<forln;i++){
_date.setDate(_date.getDate()-1)
arr.unshift(new Date(_date.valueOf()))
}
// 向后补全,重置为本月最后一天
_date=getMonthLastDay(date)
forln=_date.getDay()
for(let i=forln;i<6;i++){
_date.setDate(_date.getDate()+1)
arr.push(new Date(_date.valueOf()))
}
return arr
}
创建公用管道
import {Pipe, PipeTransform} from '@angular/core';
import {isNotNullOrUndefined} from 'codelyzer/util/isNotNullOrUndefined';
@Pipe({
name: 'taskTimeColor'
})
export class taskTimeColorPipe implements PipeTransform{
/**
* 根据type判断 传入的时间是否为当天 || 当前小时
* value 时间戳 | 时间（小时）
* type 调用类型 天 | 小时
*/
transform(value: any,type: string): any {
if(type == 'day'){
if (isNotNullOrUndefined(value)){
let day= new Date(value).getDate()
let m= new Date(value).getMonth()
let y= new Date(value).getFullYear()
return day == new Date().getDate() && m ==new Date().getMonth() && y ==new Date().getFullYear();
}else{
return false;
}
}else if(type == 'time'){
if (isNotNullOrUndefined(value)){
let day= new Date().getHours()
return day == value;
}else{
return false;
}
}
return false;
}
}
3159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
