vue 时间控件实现

Vue 时间控件实现

使用 Element UI 的 DatePicker

安装 Element UI 依赖：

npm install element-ui

在 Vue 项目中引入 Element UI：

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

Vue.use(ElementUI);

在模板中使用 DatePicker：

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

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

使用 Ant Design Vue 的 DatePicker

安装 Ant Design Vue 依赖：

npm install ant-design-vue

在 Vue 项目中引入 Ant Design Vue：

import Vue from 'vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

Vue.use(Antd);

在模板中使用 DatePicker：

<template>
  <div>
    <a-date-picker
      v-model="selectedDate"
      placeholder="选择日期"
    />
  </div>
</template>

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

使用 Vue Datepicker 独立组件

安装 vue-datepicker 依赖：

npm install vue-datepicker-next

在 Vue 项目中引入并使用：

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

<script>
import DatePicker from 'vue-datepicker-next';
import 'vue-datepicker-next/index.css';

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

自定义时间控件

创建一个基本的自定义时间选择器：

<template>
  <div>
    <input
      type="time"
      v-model="selectedTime"
      @change="handleTimeChange"
    />
    <p>选择的时间: {{ selectedTime }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedTime: ''
    };
  },
  methods: {
    handleTimeChange(event) {
      this.selectedTime = event.target.value;
    }
  }
};
</script>

处理日期范围选择

使用 Element UI 实现日期范围选择：

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

<script>
export default {
  data() {
    return {
      dateRange: []
    };
  }
};
</script>

格式化日期输出

使用 moment.js 格式化日期：

npm install moment

在组件中使用：

import moment from 'moment';

export default {
  data() {
    return {
      selectedDate: null
    };
  },
  computed: {
    formattedDate() {
      return this.selectedDate ? moment(this.selectedDate).format('YYYY-MM-DD') : '';
    }
  }
};

禁用特定日期

在 Element UI 中禁用周末：

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

<script>
export default {
  data() {
    return {
      selectedDate: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getDay() === 0 || time.getDay() === 6;
        }
      }
    };
  }
};
</script>

时间选择器国际化

设置 Element UI 为中文：

import Vue from 'vue';
import ElementUI, { locale } from 'element-ui';
import lang from 'element-ui/lib/locale/lang/zh-CN';

Vue.use(ElementUI, { locale });
locale.use(lang);

响应式时间选择

监听时间变化并执行操作：

export default {
  data() {
    return {
      selectedTime: null
    };
  },
  watch: {
    selectedTime(newVal) {
      console.log('时间已更改为:', newVal);
    }
  }
};