如何在.tsx组件的InputDatepicker中显示短日期格式

后端返回的日期格式是带T和时分秒的字符串，比如：

"2022-01-01T00:00:00.00000"

要在InputDatepicker里只显示2022-01-01，给你几个实用方案：

方案1：直接截取字符串（适合格式固定的场景） #

因为后端返回的格式固定为YYYY-MM-DDTHH:mm:ss.SSSSS，直接取前10位就能得到纯日期部分：

<InputDatepicker
  label="培训日期"
  value={trainingData?.trainingDate ? trainingData.trainingDate.slice(0, 10) : ''}
/>

方案2：用Date对象格式化（更严谨，适配格式变动） #

如果担心后续后端格式调整，用Date对象解析后手动拼接目标格式，还能规避时区问题：

// 定义日期格式化函数
const formatDate = (dateStr: string) => {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  const year = date.getFullYear();
  // 月份从0开始计数，需+1并补0保证两位数格式
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

// 组件中调用使用
<InputDatepicker
  label="培训日期"
  value={formatDate(trainingData?.trainingDate || '')}
/>

方案3：利用组件自带格式化属性（优先推荐） #

如果你的InputDatepicker组件本身支持format配置项（比如主流UI库的日期组件基本都有这个属性），直接设置格式为YYYY-MM-DD即可，无需自己处理字符串：

<InputDatepicker
  label="培训日期"
  value={trainingData?.trainingDate || ''}
  format="YYYY-MM-DD"
/>

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