当前位置：首页 > VUE

mui vue实现日期插件

2026-02-24 01:19:19VUE

MUI Vue 日期插件的实现方法

使用 MUI（Material-UI）和 Vue 结合实现日期插件，可以通过 @mui/x-date-pickers 库完成。以下是具体实现步骤：

安装必要依赖

npm install @mui/x-date-pickers @emotion/react @emotion/styled

基本日期选择器实现

<template>
  <LocalizationProvider dateAdapter={AdapterDateFns}>
    <DatePicker
      label="选择日期"
      value={selectedDate}
      onChange={(newValue) => setSelectedDate(newValue)}
    />
  </LocalizationProvider>
</template>

<script>
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';

export default {
  data() {
    return {
      selectedDate: null,
    };
  },
};
</script>

范围选择器实现

<template>
  <LocalizationProvider dateAdapter={AdapterDateFns}>
    <DateRangePicker
      localeText={{ start: '开始日期', end: '结束日期' }}
      value={[startDate, endDate]}
      onChange={(newValue) => {
        setStartDate(newValue[0]);
        setEndDate(newValue[1]);
      }}
    />
  </LocalizationProvider>
</template>

<script>
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';

export default {
  data() {
    return {
      startDate: null,
      endDate: null,
    };
  },
};
</script>

自定义样式 可以通过 sx 属性来自定义日期选择器的样式：

<DatePicker
  sx={{
    width: '100%',
    '& .MuiInputBase-root': {
      backgroundColor: '#f5f5f5',
    }
  }}
/>

本地化设置

import { zhCN } from '@mui/x-date-pickers/locales';

<LocalizationProvider 
  dateAdapter={AdapterDateFns}
  localeText={zhCN.components.MuiLocalizationProvider.defaultProps.localeText}
>

注意事项