前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >DatePicker 日期选择器,获取系统默认当前年月日

DatePicker 日期选择器,获取系统默认当前年月日

作者头像
王小婷
发布2021-07-27 11:35:28
2.8K0
发布2021-07-27 11:35:28
举报
文章被收录于专栏:编程微刊

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

推荐指数: 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/

今天就来说一下,怎么使用TDatePicker 日期选择器。废话不多说,首先看一下官方文档吧,看看官方文档是怎么给到的例子吧:

DatePicker 日期选择器 https://element.eleme.cn/#/zh-CN/component/date-picker

获取系统默认当前去年月日

代码语言:javascript
复制
<template>
  <div class="filter-container" style="margin-bottom: 20px">
    <el-date-picker
      v-model="value1"
      type="date"
      placeholder="选择开始日期"
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd"
    >
    </el-date-picker>

    <el-date-picker
      v-model="value2"
      type="date"
      placeholder="选择结束日期"
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd"
    >
    </el-date-picker>
  </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: "",
    };
  },

  created() {
    this.Date();
  },
  methods: {
    //获取当前年月日
    Date() {
      const nowDate = new Date();
      const date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate(),
      };
      const newmonth = date.month > 10 ? date.month : "0" + date.month;
      const newday = date.date > 10 ? date.date : "0" + date.date;
      this.value1 = date.year + "-" + newmonth + "-" + newday;
      this.value2 = date.year + "-" + newmonth + "-" + newday;
    },
  },
};
</script>
<style scoped>
.tab-container {
  margin: 30px;
}
</style>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档