Ionic3 ion-datetime能否同时显示预设值与占位符？

我完全理解你的痛点——既要让用户看到清晰的占位符提示，又要在打开日期选择器时自动定位到预设的日期（避免老年用户反复滚动），同时不能让预设值直接显示在输入框里误导用户。下面是一个完美适配你需求的解决方案：

核心思路 #

问题根源在于[(ngModel)]绑定预设值后，组件会立即把值渲染到输入框，直接覆盖了placeholder。我们需要做的是：

• 初始时让绑定的变量为null，确保占位符正常显示
• 当用户点击打开选择器时，再把预设日期赋值给绑定变量，让选择器自动定位到预设值
• 保留用户后续的选择，不会每次打开选择器都重置为预设值

具体实现步骤 #

1. 调整组件变量 #

在你的组件类里，定义两个变量：一个用于绑定ngModel（初始设为null），另一个存储预设的起始日期：

export class YourComponent {
  today: string;
  startingDate: Date;
  selectedDate: Date = null; // 初始为null，确保占位符正常显示

  constructor() {
    const currentDate = new Date();
    this.today = currentDate.toISOString();
    
    // 计算当前日期减去18年的预设值
    this.startingDate = new Date(
      currentDate.getFullYear() - 18,
      currentDate.getMonth(),
      currentDate.getDate()
    );
  }

  // 处理日期选择器获得焦点的事件
  onDatetimeFocus() {
    // 仅当用户未选择过日期时，设置预设值
    if (!this.selectedDate) {
      this.selectedDate = new Date(this.startingDate);
    }
  }
}

2. 修改模板中的ion-datetime #

更新你的ion-datetime标签，绑定selectedDate到ngModel，并添加ionFocus事件监听：

<ion-datetime 
  type="date" 
  displayFormat="DD/MMM/YYYY" 
  pickerFormat="DD/MMM/YYYY" 
  placeholder="Select Date" 
  [max]="today" 
  [(ngModel)]="selectedDate"
  (ionFocus)="onDatetimeFocus()"
></ion-datetime>

为什么这个方案有效？ #

• 初始状态：selectedDate为null，ion-datetime会优先显示placeholder文本，不会直接展示预设的18年前日期
• 打开选择器时：触发ionFocus事件，此时如果用户还没选过日期，就把startingDate赋值给selectedDate，选择器会自动定位到这个预设日期，用户可以自由选择更早或不超过今天的日期
• 用户选择后：selectedDate会保存用户的选择，再次打开选择器时会显示用户之前选的日期，不会重复设置预设值

关于之前尝试的[value]绑定的问题 #

你之前用[value]没生效，大概率是因为ion-datetime的value属性需要的是ISO格式的字符串（比如2001-03-19T00:00:00.000Z），而不是原始的Date对象。但即使你转成字符串，[value]绑定后依然会直接显示值覆盖占位符，不符合你的需求，所以还是上面的方案更合适。

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