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. 小结
7153 0
Element el-date-picker 日期选择器详解
|
存储 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; 格式,便于存储与处理。
1597 0
el-date-picker change事件不触发
el-date-picker change事件不触发
1178 0
element el-cascader动态编辑赋值后,不回显的解决方法(整理)
element el-cascader动态编辑赋值后,不回显的解决方法(整理)
Element Plus 日期选择器 获取选中的日期的格式(当前日期/时间戳格式)
Element Plus 日期选择器 获取选中的日期的格式(当前日期/时间戳格式)
1794 0
el-date-picker组件的picker-options常规属性设置
el-date-picker组件的picker-options常规属性设置
element中el-select下拉框位置错乱问题
element中el-select下拉框位置错乱问题
1973 0
|
JavaScript
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
4357 1
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
Element UI 日期选择器el-date-picker禁止选择指定日期(禁止选择过去,禁止选择未来)【含是否包含今天】
Element UI 日期选择器el-date-picker禁止选择指定日期(禁止选择过去,禁止选择未来)【含是否包含今天】
1381 3
element Carousel 走马灯 一次轮播3张图片(整理)
element Carousel 走马灯 一次轮播3张图片(整理)
element Carousel 走马灯 一次轮播3张图片(整理)

热门文章

最新文章