Material UI 日期和时间选择器教程

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

伏葵飚Anastasia

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

阅读量487

点赞数 3

本文链接：https://blog.csdn.net/gitblog_01090/article/details/141150964

版权

Material UI 日期和时间选择器教程

material-ui-pickersDate & Time pickers for Material UI (support from v1 to v4)项目地址:https://gitcode.com/gh_mirrors/ma/material-ui-pickers

项目介绍

Material UI 日期和时间选择器是一个为 Material UI 库提供日期和时间选择组件的开源项目。该项目支持从 Material UI v1 到 v4 的版本，并且提供了多种日期和时间选择器的实现，包括日期选择器、时间选择器等。这些组件遵循 Material Design 规范，提供了简洁易用的界面，方便用户在 React 应用中选择日期和时间。

项目快速启动

安装依赖

首先，你需要安装 Material UI 和日期时间选择器库：

npm install @mui/material @mui/lab

基本使用

以下是一个简单的日期选择器示例：

import React from 'react';
import DatePicker from '@mui/lab/DatePicker';
import TextField from '@mui/material/TextField';

function BasicDatePicker() {
  const [selectedDate, setSelectedDate] = React.useState(null);

  return (
    <DatePicker
      label="选择日期"
      value={selectedDate}
      onChange={(date) => setSelectedDate(date)}
      renderInput={(params) => <TextField {...params} />}
    />
  );
}

export default BasicDatePicker;