1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<script>
import dayjs from 'dayjs';
  export default {
    props: {
    dayBegin:{
        type:String,
        default:''
    }
  },
  emits: ['submitTime'],
    data() {
      return{
        day:'',
        shortcuts : [
        {
          text: '前一日',
          value: () => {
            const start = dayjs().subtract(1,'day').format('YYYY-MM-DD')
            return start
          }
        },
 
        {
          text: '前7天',
          value: () => {
            const start = dayjs().subtract(7,'day').format('YYYY-MM-DD');
            return start
          }
        },
        {
          text: '上一月',
          value: () => {
            const start = dayjs().subtract(1,'month').format('YYYY-MM-DD');
            return start
          }
        }
        ]
      }
    },
    watch:{
        dayBegin(){
            if(this.dayBegin!=''){
                this.day=this.dayBegin
            }
        }
    },
    mounted() {
        this.$emit('submitTime', this.day);
    },
    methods: {
        disabledDate(day) {
        return day.getTime() > Date.now()
        }
     }
}
</script>
 
<template>
    <div class="block">
        <span class="demonstration">选择日期:</span>
        <el-date-picker
          v-model="day"
          type="date"
          placeholder="选择日期"
          :disabled-date="disabledDate"
          :shortcuts="shortcuts"
          @change="$emit('submitTime', day)"
        
        />
    </div>
 
</template>
 
<style  scoped>
 
.demonstration {
  color: #333333;
  font-weight: bold;
  font-size: 14px;
}
/* :deep(.el-input__inner) {
    width: 50%;
} */
</style>