Dayjs结合MUI X DateTimePicker：允许时间为空

自定义解析与验证逻辑 #

Dayjs默认方法无法同时兼容两种格式，可通过封装自定义函数实现需求：

• 自定义解析函数：优先尝试带时间格式解析，失败则降级到纯日期格式

function parseDateTime(input) {
  // 开启严格模式，避免模糊解析
  let parsed = dayjs(input, 'D-MMM-YYYY HH:mm', true);
  if (!parsed.isValid()) {
    parsed = dayjs(input, 'D-MMM-YYYY', true);
  }
  return parsed;
}

• 自定义验证函数：用正则匹配两种格式，确保输入合法

function isValidDateTime(input) {
  const datePattern = /^\d{1,2}-[A-Za-z]{3}-\d{4}$/;
  const dateTimePattern = /^\d{1,2}-[A-Za-z]{3}-\d{4} \d{2}:\d{2}$/;
  return datePattern.test(input) || dateTimePattern.test(input);
}

可根据业务调整正则，比如月份缩写的大小写敏感度、日期位数限制等。

集成到DateTime组件 #

在组件中结合上述函数处理输入：

1. 输入解析：用户输入完成后，用parseDateTime转换为Dayjs实例，确保无论带不带时间都能得到有效日期对象
2. 合法性校验：用isValidDateTime判断输入格式，及时给用户错误提示
3. 输出处理：若需统一存储格式，纯日期可补默认时间（如00:00）；也可保留原始输入格式，按需转换

示例代码（React场景） #

import dayjs from 'dayjs';
import { useState } from 'react';

function CustomDateTimePicker() {
  const [inputValue, setInputValue] = useState('');
  const [errorMsg, setErrorMsg] = useState('');

  const handleInputChange = (e) => {
    const value = e.target.value;
    setInputValue(value);

    if (!isValidDateTime(value)) {
      setErrorMsg('请输入正确格式（示例：5-Jan-2024 或 5-Jan-2024 14:30）');
    } else {
      setErrorMsg('');
      const validDate = parseDateTime(value);
      // 此处可将validDate传入业务逻辑（如提交后端）
    }
  };

  return (
    <div>
      <input 
        type="text" 
        value={inputValue} 
        onChange={handleInputChange}
        placeholder="请输入日期或日期时间"
      />
      {errorMsg && <p style={{color: 'red', margin: '4px 0 0 0'}}>{errorMsg}</p>}
    </div>
  );
}

注意事项 #

• 本地化适配：若使用中文月份缩写，需导入Dayjs中文本地化包并设置dayjs.locale('zh-cn')，否则解析会失败
• 严格模式必须开启：解析时传入第三个参数true，防止Dayjs自动转换不匹配的格式，导致验证失效

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