基于Antd的DatePicker组件进行二次封装:支持随意输入任意格式时间

最新推荐文章于 2024-09-09 14:13:08 发布

富可敌锅

最新推荐文章于 2024-09-09 14:13:08 发布

阅读量529

点赞数

文章标签：前端 javascript react.js

XJINGUO

本文链接：https://blog.csdn.net/Hy_0452/article/details/128723769

版权

文章描述了一个基于antd的DatePicker组件的二次封装，新组件支持多种日期格式如2022-11-11、2022.11.11等混合输入，并能根据外部传入的format展示日期。主要通过正则表达式`regFormat`进行日期格式校验，使用`moment.js`处理日期对象。代码示例展示了如何解析输入日期并验证其有效性。

摘要由CSDN通过智能技术生成

该组件是基于antd的DatePicker日期组件二次封装的组件，本次封装主要是额外支持输入任意类型的日期格式

输入类型：2022-11-11、2022.11.11、2022/11/11、2022.11-12等混合输入类型，最后框中展示的格式是有外部传入的format所决定

主要代码如下

const regFormat = /^(\d{4})[-./]?(\d{2})[-/.]?(\d{2})$/


/**
 * @param 获取输入框输入的日期及格式 
 * @returns 
 */
const getInputDate = (info) => {
  let curDate = null; // 当前日期
  let tempFormat = null;
  if (info.trim() === '') {
    return false;
  }
  if (regFormat.test(info) && (isNaN(Number()) || info.includes('.'))) {
    tempFormat = info
      .replace(RegExp.$1, 'YYYY')
      .replace(RegExp.$2, 'MMM')
      .replace(RegExp.$3, 'DD');
    const preDate = info.replace(/\.|\//g, '-');
    const dateNum = preDate.split('-').join('');
    curDate = moment(dateNum);
  } else if (regFormat.test(info)) {
    tempFormat = info
      .replace(RegExp.$1, 'YYYY')
      .replace(RegExp.$2, 'MMM')
      .replace(RegExp.$3, 'DD');
    curDate = moment(dateNum);
  }

  // 判断当前输入的日期是否是有效
  const isDate =
    new Date(curDate).getDate() === Number(info?.substring(info.length - 2));
  const curFormat = isDate ? tempFormat : null; // 当前日期格式
  return isDate ? { curFormat, curDate } : null;
}