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>

相关文章
|
前端开发 JavaScript 安全
【前端相关】elementui使用el-upload组件实现自定义上传
【前端相关】elementui使用el-upload组件实现自定义上传
2423 0
|
3月前
|
存储 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; 格式,便于存储与处理。
780 0
element中使用走马灯效果el-carousel点击按钮切换第几页demo效果示例(整理)
element中使用走马灯效果el-carousel点击按钮切换第几页demo效果示例(整理)
|
关系型数据库 MySQL 数据库
Element el-date-picker 日期选择器详解
本文目录 1. 前言 2. 基本用法 3. 日期格式化 4. 选择其他日期单位 5. 选择多个日期 6. 带快捷选项 7. 禁用部分日期 8. 小结
5933 0
Element el-date-picker 日期选择器详解
Vue2使用v-model封装ElementUI_DatePicker 日期选择器组件
本文介绍了如何在Vue2中使用v-model封装ElementUI的DatePicker日期选择器组件,并实现自定义属性和方法的结合使用,包括禁用日期、格式化日期等功能。
575 2
Vue2使用v-model封装ElementUI_DatePicker 日期选择器组件
|
JavaScript
【vue】 vue-seamless-scroll 无缝滚动依赖
【vue】 vue-seamless-scroll 无缝滚动依赖
1096 1
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
9163 1
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
JavaScript
Vue2日期选择器插件(vue-datepicker-local)
这是一个基于 Vue 的日期选择器组件库,支持年份、月份、日期和时间的选择,并且均可进行范围选择。用户可以自定义日期格式与组件样式。该示例展示了如何配置组件以限制可选日期范围,并提供了相应的代码实现。
1951 0
Vue2日期选择器插件(vue-datepicker-local)
|
12月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。
【10月更文挑战第8天】本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。通过安装 VSCode 插件、配置 ESLint 和 Prettier,实现代码规范检查和自动格式化,确保代码风格一致,提高可读性和维护性。
386 2
Element el-time-picker el-time-select 时间选择器详解
本文目录 1. 概述 2. 选择任意时间 3. 默认时间设置 4. 时间格式设置 5. 指定可选时间段 6. 选择时间点 7. 时间选择变化事件
5151 0