element 旬日历

html

<li class="Person">
                <p>时间</p>
                <el-date-picker v-model="timeYear" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="changeTime"  v-bind:picker-options="pickerOptions">
            </el-date-picker>
            </li>

js

var app = new Vue({
    el: '#app',
    data() {
        return {
            //日期
            timeYear: [],
            pickerOptions: {
                shortcuts: [{
                    text: '上旬',
                    onClick(picker) {
                        const year = new Date().getFullYear();
                        const month = new Date().getMonth();
                        const start = new Date(year, month, 1);
                        const end =  new Date(year,month,10);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '中旬',
                    onClick(picker) {
                        const year = new Date().getFullYear();
                        const month = new Date().getMonth();
                        const start = new Date(year, month, 11);
                        const end =  new Date(year,month,20);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '下旬',
                    onClick(picker) {
                        const year = new Date().getFullYear();
                        const month = new Date().getMonth();
                        const start = new Date(year, month, 21);
                        const day = new Date(year,month+1,0).getDate()
                        const end =  new Date(year, month, day);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '过往10天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 10);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
        }
    },
    created() {
    },
    mounted() {
    },
    methods: {
       
    },
});