Antd moblie DatePicker自定义format

高冷的钢背兽

于 2021-02-26 16:04:49 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： datepicker antd mobile

本文链接：https://blog.youkuaiyun.com/bitcser/article/details/114136952

前端专栏收录该内容

33 篇文章

订阅专栏

在项目中使用antd的DatePicker时，直接给format属性赋值自定义格式（如MM.DD.YYYY）无效，会变成默认的YYYY-MM-DD HH:mm格式。查看官方api发现，string模式下format属性只支持最基本三种，不能直接赋自定义format字符串，可通过getCustomDate返回相应格式来解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做项目过程中，需要用到自定义的format，比如MM.DD.YYYY之类的，用antd 的DatePicker发现直接给format属性赋值是无效的，会变成默认的YYYY-MM-DD HH:mm格式。

查看官方api，发现format属性在string模式下，只支持最基本的三种，所以自定义format不能直接给format字符串。

解决：

  getCustomDate=(value)=>{
    const localeCode =  getNeoContext('localeCode') || 'CN';
    const format = timeFormatByCountryCode(localeCode) || "HH:mm";
    const dateValue = moment(value).format(format);
    return dateValue;
  }

<DatePicker
   value={this.state.valueDate}
   mode="date"
   onChange={this.onChange}
   format={(value: Date) =>{
       return this.getCustomDate(value);
   }}>
     
</DatePicker>

其中getCustomDate返回相应的format格式就可以了，比如我这里直接返回的就是MM.DD.YYYY，就可以获取到这个格式的时间了。