JHipster应用中如何将datetime-local控件仅显示日期（dd/mm/yyyy）

针对你的需求，我整理了几个实用方案，按从简单到灵活的顺序给你介绍：

方案1：改用date类型输入控件（最直接高效） #

datetime-local控件本身就是为日期+时间场景设计的，如果你只需要展示和选择日期，直接把input的type改成date就可以解决核心问题。不过要注意两个细节：

• HTML的date控件要求输入值必须是YYYY-MM-DD格式的字符串
• 你的persona.fechaNacimiento当前格式是01/09/2018T00:00，需要做格式转换适配

具体操作步骤： #

1. 修改HTML中的input标签：

<input id="field_fechaNacimiento" type="date" class="form-control" name="fechaNacimiento" 
       [(ngModel)]="formattedBirthdate" required/>

2. 在对应的组件类中添加getter和setter处理格式转换：

// 假设组件中已定义persona对象
get formattedBirthdate(): string {
  if (this.persona.fechaNacimiento) {
    // 拆分原始字符串，提取日期部分并转成YYYY-MM-DD格式
    const datePart = this.persona.fechaNacimiento.split('T')[0];
    const [day, month, year] = datePart.split('/');
    return `${year}-${month}-${day}`;
  }
  return '';
}

set formattedBirthdate(value: string) {
  if (value) {
    // 将控件返回的YYYY-MM-DD转回你需要的dd/mm/yyyyT00:00格式
    const [year, month, day] = value.split('-');
    this.persona.fechaNacimiento = `${day}/${month}/${year}T00:00`;
  }
}

修改完成后，前端会显示纯日期选择器，用户选择的日期也会自动转换成你需要的格式存回persona.fechaNacimiento。

方案2：用Angular DatePipe适配（保留datetime-local的折中方案） #

如果因为某些限制必须保留datetime-local类型，也可以通过Angular的DatePipe处理显示格式，不过要拆分双向绑定来手动处理值的转换：

具体操作步骤： #

1. 在组件中注入DatePipe：

import { DatePipe } from '@angular/common';

constructor(private datePipe: DatePipe) { }

2. 修改HTML，拆分[(ngModel)]为单向绑定和事件监听：

<input id="field_fechaNacimiento" type="datetime-local" class="form-control" name="fechaNacimiento" 
       [ngModel]="formattedBirthdateForDisplay" 
       (ngModelChange)="onBirthdateChange($event)"
       required/>

3. 在组件中添加对应的处理逻辑：

get formattedBirthdateForDisplay(): string {
  if (this.persona.fechaNacimiento) {
    // 把原始格式转成datetime-local要求的YYYY-MM-DDTHH:mm格式
    const datePart = this.persona.fechaNacimiento.split('T')[0];
    const [day, month, year] = datePart.split('/');
    return `${year}-${month}-${day}T00:00`;
  }
  return '';
}

onBirthdateChange(value: string) {
  if (value) {
    // 将控件返回的值转回你需要的格式
    const datePart = value.split('T')[0];
    const [year, month, day] = datePart.split('-');
    this.persona.fechaNacimiento = `${day}/${month}/${year}T00:00`;
  }
}

这个方案虽然能保留datetime-local控件，但用户仍会看到时间部分（我们固定为00:00），所以更推荐方案1。

额外提示：JHipster实体生成的优化建议 #

如果你是通过JHipster实体生成器创建的Person模块，其实可以在生成实体时直接选择Date类型而非DateTime类型，这样JHipster会自动生成date类型的输入控件，无需手动修改。如果已经生成了实体，也可以修改.jhipster/Person.json配置文件中的字段类型，再重新生成代码。

内容的提问来源于stack exchange，提问作者Luis Alberto Sánchez Landa