Semi Design

Semi Design是由抖音的前端团队与MED产品设计团队共同开发并维护的一个设计系统，并且支持跨端技术方案，能够快速打造不同平台上的通用组件库。
可通过以下方式安装：

# 使用 npm
npm i @douyinfe/semi-ui

# 使用 yarn
yarn add @douyinfe/semi-ui

# 使用 pnpm
pnpm add @douyinfe/semi-ui

安装完成后，Semi Design使用起来也非常简捷，特别是在Webpack、create-react-app或Vite等工程化项目中使用时，无需进行任何编译项配置，直接使用即可。
以下为Semi Design的日期选择器组件使用代码与效果：

import React from 'react';
import { DatePicker } from '@douyinfe/semi-ui';

export default function TestDateComp() {
    return (
        <div>
            <DatePicker type="dateTime" density="compact" />
        </div>
    );
}

从上图可以看出，日期时间的选择是分不同步骤的，选择时间时，会单独弹出时间选择面板。更多日期组件详细用法可以通过Semi Design官网进行学习。

MUI X

MUI X是用于复杂用例的高级React UI组件的集合，这些组件比MUI核心库中的组件复杂得多，适用于数据丰富的应用和各种其他用例的高级功能。对于不同的第三方时间库，比如date-fns、Day.js、Luxon和Moment.js，MUI X提供的日期时间组件也能支持，只需要安装对应的data-io即可，如下所示：

// date-fns
npm install @date-io/date-fns
// or for Day.js
npm install @date-io/dayjs
// or for Luxon
npm install @date-io/luxon
// or for Moment.js
npm install @date-io/moment

MUI X提供的日期组件效果，从可视化角度来说，应该是我自己比较喜欢的样式，如下几张图是MUI X的日期组件实现的日期选择效果图：
亮色模式下效果：

暗色模式下效果：

基本使用如下：

import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import TextField from '@mui/material/TextField';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';

export default function BasicDateTimePicker() {
  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-07'));

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DateTimePicker
        renderInput={(props) => <TextField {...props} />}
        label="DateTimePicker"
        value={value}
        onChange={(newValue) => {
          setValue(newValue);
        }}
      />
    </LocalizationProvider>
  );
}

如上图所示，MUI X 提供的时间组件更能够适用于不同时间库，样式上更丰富、更形象。

Antd Design

Antd Design组件库，我相信大家都很熟悉了，特别是面向B端产品的前端开发人员更熟悉，因此，我就展示以下Antd Design提供的日期时间组件的基本使用与效果：

import React from 'react'; 
import { DatePicker } from 'antd'; 
const { RangePicker } = DatePicker; 

const App: React.FC = () => ( <RangePicker showTime />  ); 
export default App;

总结

从以上对比效果可以看出，如果倾向于适配更多第三方时间库和想要样式上更酷炫的可以使用MUI X组件库，这三种组件库提供的日期组件使用都比较简洁，选哪种就看你们自己啦。

UI组件库对比，MUI X的日期选择组件更酷炫

Semi Design

MUI X

Antd Design

总结