如何配置MomentJS实现显示Now/Tomorrow替代今明日期？

嘿，刚好我对AntD的DatePicker和MomentJS都比较熟悉，来给你捋捋解决方案～

首先明确一点：MomentJS确实没有内置的格式符能直接输出Now或Tomorrow，不过咱们完全可以通过自定义逻辑来实现需求，这里有两种靠谱的方法：

AntD的DatePicker组件提供了灵活的自定义渲染能力，不管是弹出面板里的日期单元格，还是输入框里的选中值，都能轻松修改：

1. 修改弹出面板的日期显示 #

如果你想让面板里的今日/明日显示成Now/Tomorrow，可以用dateRender属性自定义每个单元格的内容：

import { DatePicker } from 'antd';
import moment from 'moment';

const customDateCell = (currentDate) => {
  const today = moment().startOf('day');
  const tomorrow = moment().add(1, 'day').startOf('day');

  // 匹配今日
  if (currentDate.isSame(today, 'day')) {
    return <div style={{ color: '#1890ff', fontWeight: 'bold' }}>Now</div>;
  }
  // 匹配明日
  if (currentDate.isSame(tomorrow, 'day')) {
    return <div style={{ color: '#52c41a', fontWeight: 'bold' }}>Tomorrow</div>;
  }
  // 其他日期正常显示日期数字
  return currentDate.date();
};

// 使用组件
function MyDatePicker() {
  return <DatePicker dateRender={customDateCell} />;
}

这样面板里的今日会变成蓝色加粗的"Now"，明日变成绿色加粗的"Tomorrow"，其他日期正常显示数字，视觉区分很明显。

2. 修改输入框的选中值显示 #

如果选中日期后，想让输入框里显示Now/Tomorrow而不是具体日期，可以结合onChange和自定义渲染输入框来实现：

import { DatePicker, Input } from 'antd';
import moment from 'moment';
import { useState } from 'react';

const formatDisplayText = (date) => {
  if (!date) return '';
  const today = moment().startOf('day');
  const tomorrow = moment().add(1, 'day').startOf('day');

  if (date.isSame(today, 'day')) return 'Now';
  if (date.isSame(tomorrow, 'day')) return 'Tomorrow';
  // 其他日期用你需要的格式，比如YYYY-MM-DD
  return date.format('YYYY-MM-DD');
};

function MyDatePicker() {
  const [selectedDate, setSelectedDate] = useState(null);

  return (
    <DatePicker
      value={selectedDate}
      onChange={(date) => setSelectedDate(date)}
      render={(pickerProps) => (
        <Input
          {...pickerProps}
          value={formatDisplayText(selectedDate)}
          placeholder="Select date"
        />
      )}
    />
  );
}

如果你希望项目里任何地方调用Moment时，都能直接输出Now/Tomorrow，可以扩展Moment的原型方法，做一个全局可用的自定义格式化函数：

import moment from 'moment';

// 给Moment添加自定义格式化方法
moment.fn.toCustomString = function() {
  const today = moment().startOf('day');
  const tomorrow = moment().add(1, 'day').startOf('day');

  if (this.isSame(today, 'day')) return 'Now';
  if (this.isSame(tomorrow, 'day')) return 'Tomorrow';
  // 默认格式可以根据你的需求调整
  return this.format('YYYY-MM-DD');
};

// 调用示例
console.log(moment().toCustomString()); // 输出 "Now"
console.log(moment().add(1, 'day').toCustomString()); // 输出 "Tomorrow"
console.log(moment().add(3, 'day').toCustomString()); // 输出类似 "2024-05-20"

之后在AntD的DatePicker里，你可以结合方法一的自定义渲染，调用这个扩展方法来生成显示文本。

小提醒 #

如果你的项目用的是AntD v5，注意它默认已经换成Day.js代替MomentJS了，不过逻辑是完全一样的，只需要把Moment的API换成Day.js的对应方法就行（比如isSame、startOf的用法基本一致）。

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