Replace Moment.js in Ant Design (Antd) with Day.js

在 Ant Design (Antd) 中使用 Day.js 替换 Moment

This is an experimental attempt of replacing Moment.js in Ant Design project (Antd) with Day.js. If your project is not built with Ant Design, you don’t have to include all those plugins below.

这是一个实验性的在 Ant Design (Antd) 中使用 Day.js 替换 Moment 的方案，如果你的项目并没有使用 Ant Design 那则不需要引入下面列出的全部插件。

Results 结论

Update: Antd Official doc 更新：antd 官方文档 https://ant.design/docs/react/replace-moment

https://ant.design/docs/react/replace-moment-cn

Only 3 steps to replace Moment.js with Day.js. Bundle size reduced from 65kb -> 4.19 kb. 只需要 3 步就可以快速实现替换，打包体积从 65kb 减小到 4.19 kb

Name	Size	Size gzip
Moment.js	231 kb	65.55 kb
Day.js	11.11 kb	4.19 kb

Steps 步骤

1. Install Day.js 安装 Day.js

npm install dayjs --save
npm install antd-dayjs-webpack-plugin

1. Update Webpack config 更新 Webpack 配置 More info 参考 https://github.com/ant-design/antd-dayjs-webpack-plugin

// webpack-config.js
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');

module.exports = {
  plugins: [
    new AntdDayjsWebpackPlugin()
  ]
}

That’s it. Done. 就这么简单就完成了。

Notice 说明

1. Day.js is designed to be immutable, however, in order to make full compatible to moment.js in Antd, we have to use a plugin 🚨 BadMutable 🚨 to make Day.js mutable. This’s not good and not what we want, but there’s no better option. With this plugin enabled, all setters will update the instance itself.

• Day.js 被设计成不可变的对象，但是为了完成对 moment.js 的替换，必须要引入一个 🚨 BadMutable 🚨插件让其变成可变对象，这并不是一个好的选择，但为了兼容也没有更好的办法。当使用这个插件后，所有的 setter 都会更新当前实例。

1. Day.js is a lightweight library with only 2kb size, but we have to use some other plugins to make full compatible to moment.js in Antd, so the final bundle size is 4.19 kb (Still small 😀)

• Day.js 是一个只有 2kb 的轻量级时间库，但为了完成对 moment.js 和 Antd 代码的替换，我们需要引入一些特殊的插件，这会使最终的体积变成 4.19 kb （但仍然很小呀😀 ）

<del> Previous manual solution:

---

1. Update Webpack config 更新 Webpack 配置 You don’t have to replacemoment to dayjs one by one in your code, Webpack will do this. 无需手动替换 moment 成 dayjs，Webpack 可以自动完成这个事情。

module.exports = {
  resolve: {
    alias: {
      moment: 'dayjs',
    }
  }
}

1. Init Day.js in project’s main index.js 在项目 index.js 中初始化 Day.js In the main entrance page (usually index.js / main.js), import Day.js core and it’s plugins. 在项目的入口文件中 （通常是 index.js / main.js ），引入 Day.js 核心库和相关插件

//import moment from 'moment';
//moment.locale('zh-cn');

import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import weekOfYear from 'dayjs/plugin/weekOfYear';
import isMoment from 'dayjs/plugin/isMoment';
import badMutable from 'dayjs/plugin/badMutable';
import localeData from 'dayjs/plugin/localeData';
import advancedFormat from 'dayjs/plugin/advancedFormat';
import weekYear from 'dayjs/plugin/weekYear';
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
import 'dayjs/locale/zh-cn';

dayjs.extend(isSameOrBefore);
dayjs.extend(isSameOrAfter);
dayjs.extend(advancedFormat);
dayjs.extend(customParseFormat);
dayjs.extend(weekYear);
dayjs.extend(weekOfYear);
dayjs.extend(isMoment);
dayjs.extend(localeData);
dayjs.extend(badMutable);

dayjs.locale('zh-cn');

</del>

[iamkun]

@yongdamsh Need some time. Updates: #569 add .weekday API

[hytStart]

按着您的步骤，引入了dayjs和相关插件，还是说 antd只支持moment The value/defaultValue of DatePicker or MonthPicker must be a moment object after antd@2.0