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>

相关文章
|
关系型数据库 MySQL 数据库
Element el-date-picker 日期选择器详解
本文目录 1. 前言 2. 基本用法 3. 日期格式化 4. 选择其他日期单位 5. 选择多个日期 6. 带快捷选项 7. 禁用部分日期 8. 小结
7263 0
Element el-date-picker 日期选择器详解
|
存储 JSON 数据库
vue3中实现文件上传---通过element-plus的upload组件
vue3中实现文件上传---通过element-plus的upload组件
ECharts 柱状图横轴(X轴)文字内容显示不全
ECharts 柱状图横轴(X轴)文字内容显示不全
2873 0
|
存储 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; 格式,便于存储与处理。
1658 0
|
JavaScript 前端开发 jenkins
【前端】vue项目打包Browserslist: caniuse-lite is outdated. Please run: npx update-browserslist-db@latest解决方案
【前端】vue项目打包Browserslist: caniuse-lite is outdated. Please run: npx update-browserslist-db@latest解决方案
4536 0
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
10929 46
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
11月前
|
安全 Linux 数据安全/隐私保护
​如何安装 telnet-0.17-65.el7_8.x86_64.rpm(CentOS 7 RPM 安装详细步骤)​
Telnet是用于远程登录的客户端工具,适用于测试网络连接,但因不加密,存在安全风险,建议在受控环境中使用。本文介绍在CentOS/RHEL 7系统上通过rpm或yum命令安装Telnet的方法,并验证安装结果。
2610 0
|
JavaScript
Vue2日期选择器插件(vue-datepicker-local)
这是一个基于 Vue 的日期选择器组件库,支持年份、月份、日期和时间的选择,并且均可进行范围选择。用户可以自定义日期格式与组件样式。该示例展示了如何配置组件以限制可选日期范围,并提供了相应的代码实现。
3054 0
Vue2日期选择器插件(vue-datepicker-local)
|
JSON JavaScript 定位技术
Echarts 绘制地图(中国、省市、区县),保姆级教程!
Echarts 绘制地图(中国、省市、区县),保姆级教程!
29361 154
|
JavaScript 前端开发 开发工具
使用vue3+element-ui plus 快速构建后台管理模板
本文介绍了如何使用Vue 3和Element UI Plus快速构建后台管理模板的步骤,包括安装Vue 3脚手架、Element UI Plus以及如何全局配置Element UI Plus。然后详细讲解了如何使用Element UI Plus构建布局,包括Header组件、Aside组件和HomeView视图的创建和样式调整,以及App.vue和main.css的修改,最后提供了项目的文件结构图和效果展示。
使用vue3+element-ui plus 快速构建后台管理模板

热门文章

最新文章