elementui datepick

ElementUI DatePicker 使用指南

ElementUI 是一套基于 Vue.js 的组件库，DatePicker 是其中一个常用的日期选择组件。以下是关于 ElementUI DatePicker 的使用方法和常见功能。

安装 ElementUI

确保项目中已安装 ElementUI。若未安装，可通过以下命令安装：

npm install element-ui -S

基本用法

在 Vue 项目中引入 ElementUI 和 DatePicker 组件：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

在模板中使用 DatePicker：

<template>
  <el-date-picker v-model="date" type="date" placeholder="选择日期"></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      date: ''
    };
  }
};
</script>

日期范围选择

DatePicker 支持选择日期范围：

<el-date-picker
  v-model="dateRange"
  type="daterange"
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期">
</el-date-picker>

禁用日期

可以通过 picker-options 属性禁用某些日期：

<el-date-picker
  v-model="date"
  :picker-options="pickerOptions">
</el-date-picker>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      }
    };
  }
};
</script>

自定义日期格式

使用 format 属性自定义日期显示格式：

<el-date-picker
  v-model="date"
  type="date"
  format="yyyy-MM-dd"
  value-format="yyyy-MM-dd">
</el-date-picker>

国际化设置

ElementUI 支持国际化，可通过引入语言包设置中文：

import locale from 'element-ui/lib/locale/lang/zh-CN';
Vue.use(ElementUI, { locale });

事件绑定

DatePicker 支持 change 事件，可在日期变化时触发：

<el-date-picker
  v-model="date"
  @change="handleDateChange">
</el-date-picker>

<script>
export default {
  methods: {
    handleDateChange(val) {
      console.log('选择的日期:', val);
    }
  }
};
</script>

更多类型

DatePicker 还支持其他类型，如月份选择、年份选择等：

<el-date-picker
  v-model="month"
  type="month"
  placeholder="选择月份">
</el-date-picker>

以上是 ElementUI DatePicker 的常见用法和功能，更多详细配置可参考官方文档。