mui vue实现日期插件

MUI Vue 实现日期插件

在 Vue 项目中，可以使用 MUI（Material-UI）风格的日期选择器插件。以下是两种常见的实现方式：

使用 Vuetify 的日期选择器

Vuetify 是一个基于 Material Design 的 Vue UI 组件库，内置了日期选择器组件。

安装 Vuetify：

npm install vuetify

在 Vue 文件中使用：

<template>
  <v-date-picker v-model="date"></v-date-picker>
</template>

<script>
export default {
  data() {
    return {
      date: new Date().toISOString().substr(0, 10)
    }
  }
}
</script>

使用 Material-UI 的 Vue 实现

通过 @material-ui/core 和 @material-ui/pickers 可以实现类似效果。

安装依赖：

npm install @material-ui/core @material-ui/pickers date-fns

示例代码：

<template>
  <div>
    <input
      :value="formattedDate"
      @click="showPicker = true"
      readonly
    />
    <DatePicker
      v-model="selectedDate"
      v-if="showPicker"
      @input="handleDateChange"
    />
  </div>
</template>

<script>
import { DatePicker } from '@material-ui/pickers'
import { format } from 'date-fns'

export default {
  components: {
    DatePicker
  },
  data() {
    return {
      selectedDate: new Date(),
      showPicker: false
    }
  },
  computed: {
    formattedDate() {
      return format(this.selectedDate, 'yyyy-MM-dd')
    }
  },
  methods: {
    handleDateChange(date) {
      this.selectedDate = date
      this.showPicker = false
    }
  }
}
</script>

使用第三方日期选择器库

vue2-datepicker 是一个轻量级的日期选择器组件。

安装：

npm install vue2-datepicker

使用示例：

<template>
  <date-picker v-model="date" format="YYYY-MM-DD"></date-picker>
</template>

<script>
import DatePicker from 'vue2-datepicker'
import 'vue2-datepicker/index.css'

export default {
  components: { DatePicker },
  data() {
    return {
      date: ''
    }
  }
}
</script>

自定义样式调整

如果需要自定义样式以匹配 MUI 设计规范，可以通过覆盖 CSS 变量或使用 SCSS 修改：

/* 示例：修改 Vuetify 日期选择器颜色 */
.v-date-picker {
  --v-primary-base: #1976d2;
  --v-secondary-base: #424242;
}

以上方法可以根据项目需求选择最适合的实现方案，Vuetify 提供了最完整的 Material Design 实现，而 @material-ui/pickers 则更适合需要高度定制化的场景。