如何将Ionic ion-datetime组件默认值设置为当前日期减7天

先修正现有代码的语法问题 #

你当前写的<ion-datetime [(ngModel)]="mydate1" [(ngModel)]="defaultDate" ></ion-datetime>存在语法错误：同一个DOM元素上不能绑定两个Angular双向绑定属性，重复绑定会直接导致值不更新、控制台报错，需要改成单绑定的写法：

<!-- 修正后的单绑定示例 -->
<ion-datetime [(ngModel)]="defaultDate"></ion-datetime>

核心实现思路 #

完全不需要做“切割字符串→转整数算差值→拼回字符串”这类冗余操作，依靠JS原生Date对象的能力就能简单实现向前推7天的计算，而且自动兼容跨月、跨年、大小月、闰月的边界场景，比手动计算可靠得多。

方案1：初始化时一行代码完成计算 #

直接在定义defaultDate变量时，通过Date的setDate方法做天数偏移，计算完成后直接转成ISO格式字符串（刚好匹配ion-datetime要求的输入格式）：

defaultDate: string = new Date(new Date().setDate(new Date().getDate() - 7)).toISOString();

这个写法的优势是代码极简，不需要额外写生命周期钩子逻辑。

方案2：可读性更强的拆分写法 #

如果觉得一行代码可读性不足，可以把计算逻辑放到组件初始化流程里，代码更易维护：

export class PageComponent {
  // 先声明变量，后续在初始化阶段赋值
  defaultDate: string;

  ngOnInit() {
    const today = new Date();
    // setDate方法会自动处理跨边界的日期推算，比如月初减7天会自动回溯到上个月
    today.setDate(today.getDate() - 7);
    // 转成ISO字符串赋值给绑定变量
    this.defaultDate = today.toISOString();
  }
}

方案3：搭配轻量日期工具库（可选） #

如果项目已经引入了date-fns、dayjs这类日期工具库，还可以用更语义化的方法实现，一眼就能看懂逻辑：

// 以date-fns为例，直接调用封装好的减天方法
import { subDays } from 'date-fns';
defaultDate: string = subDays(new Date(), 7).toISOString();

注意事项 #

不推荐手动切割ISO字符串做日期加减：

• 这类写法代码冗余，需要额外处理字符串拆分、格式拼接的逻辑
• 很容易遇到时区偏移、跨月日期计算错误的问题（比如1月2号往前推3天，手动算很容易错算成1月-1号而不是去年12月30号）
• 原生Date的setDate方法已经内部处理了所有边界情况，不需要重复造轮子

内容的提问来源于stack exchange，提问作者Kalybor