element-使用el-date-picker 选择日期后返回周几(整理)

简介: element-使用el-date-picker 选择日期后返回周几(整理)
<template>
  <!-- <el-form-item label="日期">
    <el-input v-model="listQuery.beanName" class="width300" placeholder="请输入类名"></el-input>
    <el-date-picker v-model="listQuery.day" type="date" placeholder="选择日期" format="yyyy-MM-dd"
      value-format="yyyy-MM-dd">
    </el-date-picker>
  </el-form-item> -->
  <div class="workday">
    <el-date-picker v-model="dayData" type="date" placeholder="选择日期"
      @change="dataChange(dayData)" />
      <div>{{week}}</div>
  </div>
</template>
<script>
  export default {
    components: {},
    data() {
      return {
        dayData: '',  //日期
        week: '', //星期
      }
    },
    created() {},
    mounted() {
    },
    watch: {},
    computed: {},
    methods: {
      dataChange(value){
        var weekday = new Array(7);
        weekday[0] = "周日";
        weekday[1] = "周一";
        weekday[2] = "周二";
        weekday[3] = "周三";
        weekday[4] = "周四";
        weekday[5] = "周五";
        weekday[6] = "周六";
        console.log(weekday[value.getDay()], '=---======------')
        var shift = new Date(value); //把标准时间转换成正常时间
        this.dayData = shift.getFullYear() + '-' + (shift.getMonth() + 1) + '-' + shift.getDate();  //赋值给日期-传值给后台-因传值需要正常日期
        this.week = weekday[value.getDay()]; //周几
        alert(this.dayData)
        alert(this.week)
      },
    },
  }
</script>
只显示日期
<el-date-picker format="MM-dd" value-format="MM-dd" v-model="form.autumnTime" type="date" placeholder="选择日期">
</el-date-picker>

相关文章
|
关系型数据库 MySQL 数据库
Element el-date-picker 日期选择器详解
本文目录 1. 前言 2. 基本用法 3. 日期格式化 4. 选择其他日期单位 5. 选择多个日期 6. 带快捷选项 7. 禁用部分日期 8. 小结
7211 0
Element el-date-picker 日期选择器详解
Element Plus 日期选择器 获取选中的日期的格式(当前日期/时间戳格式)
Element Plus 日期选择器 获取选中的日期的格式(当前日期/时间戳格式)
1824 0
|
JavaScript
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
4412 1
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
element-el-time-picker 开始时间-结束时间-回显(整理)
element-el-time-picker 开始时间-结束时间-回显(整理)
|
SQL XML Java
解决关于在idea使用Mybatis时, 编写xml的动态sql语句背景高亮不舒服问题
解决关于在idea使用Mybatis时, 编写xml的动态sql语句背景高亮不舒服问题
4756 0
Electron + Vite + TS + Vue3打开新窗口实战
前言 我们在使用 Electron 编写桌面应用时,打开新窗口可以说是一个非常常见的场景了。很多刚接触 Electron 的小伙伴面对这样一个问题可能都会显得比较棘手,比如打开新窗口如何知道渲染哪一个页面?打开的新窗口如何与其它窗口产生联系,比如父子窗口?...等等一系列问题。 今天我们就将 Electron 打开新窗口的常见做法分享给大家,而且是基于最新的 TS 封装。
2444 0
Electron + Vite + TS + Vue3打开新窗口实战
|
Web App开发 前端开发 JavaScript
Element UI框架中自定义input组件的placeholder样式。
确保这些样式在你的应用程序CSS文件中定义,且该文件已正确加载到项目中。通过以上方法,可以控制Element UI组件中input的placeholder样式,使其满足特定的设计要求。这些更改都是基于CSS伪元素进行的,因此并不会对DOM结构产生改变,保持了原有结构的简洁和高效。
981 12
|
前端开发 JavaScript
前端vue:解决Invalid prop: type check failed for prop “model“. Expected Object, got Array问题
前端vue:解决Invalid prop: type check failed for prop “model“. Expected Object, got Array问题
前端vue:解决Invalid prop: type check failed for prop “model“. Expected Object, got Array问题
|
存储 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; 格式,便于存储与处理。
1630 0
|
存储 前端开发 Java
Element el-upload 文件上传/图片上传/拖拽上传/附带参数/附带请求头部详解
文目录 1. 前言 2. 基本用法 2.1 前端部分 2.2 后端部分 2.3 获取后端返回信息 3. 外观功能介绍 3.1 拖拽上传 3.2 显示图片 3.3 设置文件列表样式 3.4 显示提示信息 4. 事件功能介绍 4.1 限制上传文件数量 4.2 限制上传文件类型和大小 4.3 移除文件处理 4.4 手动上传 5. 附带参数 6. 附带请求头部 7. 小结
8616 0