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. 小结
7064 0
Element el-date-picker 日期选择器详解
element el-cascader动态编辑赋值后,不回显的解决方法(整理)
element el-cascader动态编辑赋值后,不回显的解决方法(整理)
Element Plus 日期选择器 获取选中的日期的格式(当前日期/时间戳格式)
Element Plus 日期选择器 获取选中的日期的格式(当前日期/时间戳格式)
1731 0
|
11月前
|
存储 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; 格式,便于存储与处理。
1529 0
|
JavaScript
Vue2日期选择器插件(vue-datepicker-local)
这是一个基于 Vue 的日期选择器组件库,支持年份、月份、日期和时间的选择,并且均可进行范围选择。用户可以自定义日期格式与组件样式。该示例展示了如何配置组件以限制可选日期范围,并提供了相应的代码实现。
2921 0
Vue2日期选择器插件(vue-datepicker-local)
|
前端开发 安全 Java
java发布公告的实现流程
构建一个Java公告发布系统涉及到前端界面设计、后端业务逻辑处理、数据库设计与交互、安全性保障等多个环节。通过采用现代的开发框架和最佳实践,可以高效地开发出既安全又易于维护的系统。随着需求的增长,系统还可以进一步扩展,比如增加评论功能、通知订阅、多语言支持等。
494 1
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。
【10月更文挑战第8天】本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。通过安装 VSCode 插件、配置 ESLint 和 Prettier,实现代码规范检查和自动格式化,确保代码风格一致,提高可读性和维护性。
738 2
Element UI 日期选择器el-date-picker禁止选择指定日期(禁止选择过去,禁止选择未来)【含是否包含今天】
Element UI 日期选择器el-date-picker禁止选择指定日期(禁止选择过去,禁止选择未来)【含是否包含今天】
1359 3
|
存储
el-tree 动态指定默认选中节点
el-tree 动态指定默认选中节点
1515 6
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
2374 3