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

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

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

推荐指数:

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

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

<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>

相关文章
|
6月前
|
存储 JavaScript 前端开发
element ui <el-date-picker> 设置展示当前月
在 Element UI 中,使用 `el-date-picker` 的 `value-format` 属性可将日期值格式化为指定字符串。设置 `type=&quot;month&quot;` 时,绑定值默认为 Date 对象,通过 `value-format=&quot;yyyy-MM&quot;` 可将其转为如 &quot;2023-05&quot; 格式,便于存储与处理。
1260 0
|
开发框架 JavaScript 小程序
uni-app——如何阻止事件冒泡
uni-app——如何阻止事件冒泡
729 0
|
关系型数据库 MySQL 数据库
Element el-date-picker 日期选择器详解
本文目录 1. 前言 2. 基本用法 3. 日期格式化 4. 选择其他日期单位 5. 选择多个日期 6. 带快捷选项 7. 禁用部分日期 8. 小结
6563 0
Element el-date-picker 日期选择器详解
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
10282 46
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
开发指南029-el-table-column对齐属性
按开发文档和正常理解,el-table-column具有属性align,可以填left,center,right控制内容的对齐方式
|
JavaScript 数据安全/隐私保护
如何在Vue组件中调用封装好的外部js文件方法
这篇文章介绍了如何在Vue组件中调用封装好的外部js文件方法,包括在Vue项目中全局引入外部js文件,并在组件中通过this.$myMethod()的方式调用外部js文件中定义的方法。
如何在Vue组件中调用封装好的外部js文件方法
|
存储 JavaScript 前端开发
vue3获取本地的当前时间转化为年月日显示然后计算之后一周的时间
vue3获取本地的当前时间转化为年月日显示然后计算之后一周的时间
|
资源调度
蓝易云 - Error: PostCSS plugin autoprefixer requires PostCSS 8问题解决办法
以上步骤应该可以解决"PostCSS plugin autoprefixer requires PostCSS 8"的问题。如果问题仍然存在,你可能需要检查你的项目配置,确保没有其他的冲突或问题。
742 0
|
API
vue2、vue3分别配置echarts多图表的同步缩放(一)
vue2、vue3分别配置echarts多图表的同步缩放
893 0