vue的年月日时间选择器

王小婷

发布于 2021-03-11 11:18:10

1.3K0

发布于 2021-03-11 11:18:10

文章被收录于专栏：编程微刊

vue-element-admin一个基于 vue2.0 和 Eelement 的控制面板 UI 框架，这是使用vue技术栈开发的前端程序员的首选管理系统模板，模板以及非常的成熟了，并且有相关的社区和维护人员，开发时候遇到问题也不要慌。

推荐指数：star:62.1k Github 地址：https://github.com/PanJiaChen/vue-element-admin Demo体验：https://panjiachen.github.io/vue-element-admin/#/dashboard

文档：https://panjiachen.github.io/vue-element-admin-site/zh/

<template>
  <div class="tab-container">
    <div class="filter-container" style="margin-bottom:20px;">
      <el-date-picker
      v-model="value1"
      type="date"
       style="width: 150px;"
      placeholder="选择日期">
    </el-date-picker>
    <el-date-picker
      v-model="value2"
      type="date"
       style="width: 150px;"
      placeholder="选择日期">
    </el-date-picker>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      //计算日期
      value1: "",
      value2: "",
    };
  },
  methods: {},
};
</script>
<style scoped>
.tab-container {
  margin: 30px;
}
</style>