ionic4中日期前一天，后一天的效果以及将日期转换为具体的星期

具体效果：

HTML代码如下：

<ion-header>
  <!-- 文字提示 -->
  <ion-icon class="restaurant" name="restaurant" color="primary"></ion-icon>午餐
  <!-- 前一天的按钮 -->
  <ion-button (click)="preDay()" class="preDay"><</ion-button>
  <!-- 日期 -->
  <ion-input type="text" readonly="readonly" class="lblDate" [(ngModel)]="date"></ion-input>
  <!-- 星期 -->
  <ion-input type="text" readonly="readonly" class="lblWeek" [(ngModel)]="week"></ion-input>
  <!-- 后一天的按钮 -->
  <ion-button (click)="nextDay()" class="nextDay">></ion-button>
</ion-header>

CSS样式：

// 日期提示
.lblDate {
    margin-left: 40%;
    width: 100px;
    margin-top:-8%;
  }
  // 星期提示
  .lblWeek {
    width:55px;
    margin-left: 63%;
    margin-top:-9.5%;
  }
  .preDay {
    margin-left: 10%;
    width:20px;
    height:20px;
    margin-top: -6px;
  }
  .nextDay {
    width:20px;
    height:20px;
    margin-left: 5%;
    margin-top: -6px;
    float: right;
    margin-right: 10%;
    margin-top:-7%;
  }

具体方法实现前一天，后一天效果：

import { Component, OnInit } from '@angular/core';
import sd from 'silly-datetime';

@Component({
  selector: 'app-button',
  templateUrl: './button.page.html',
  styleUrls: ['./button.page.scss'],
})
export class ButtonPage implements OnInit {
  constructor() { }
  // 声明一个临时的时间，用于前一天后一天的时间转换
  public TempSelectDay = new Date();
  //声明具体的一天
  public date: "2019-04-28";
  // 声明是周几
  public week;
  ngOnInit() {
  }
  //前一天的事件
  preDay() {
    // 当界面显示的日期大于今天时，才能往回点，否则提示“不能返回到昨天”
      this.date = sd.format(this.TempSelectDay.setDate(this.TempSelectDay.getDate() - 1), 'YYYY-MM-DD');
      this.week = this.transform(this.date);
  }
  //后一天的事件
  nextDay() {
    this.date = sd.format(this.TempSelectDay.setDate(this.TempSelectDay.getDate() + 1), 'YYYY-MM-DD');
    this.week = this.transform(this.date);
  }
 //根据日期转换为具体的周几
  transform(value: any): any {
    if (value !== undefined) {
      let weekArray = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六');
      let date = new Date(value);
      let week = weekArray[date.getDay()];
      return week;
    }
  }
}

如果本篇博客对您的学习有所帮助，记得点赞哦！