根据选择的月份限制日期选择范围为当前选中月份的日期

示例

<template>
    <div class="detail-dialog">
        <el-dialog
            :title="dialogTitle"
            :visible="dialogVisible"
            width="600px"
            @close="handleDialogClose('close')">
            <div class="dflex-warp">
                <div class="dflex-width">
                    <span class="label-width"><em class="start font-red mr5">*</em>选择月份：</span>
                    <el-date-picker
                        v-model="dataMonth"
                        type="month"
                        format="yyyy-MM"
                        value-format="yyyy-MM"
                        class="input-width"
                        @change="handleChange">
                    </el-date-picker>
                </div>
                <div class="dflex-width">
                    <span class="label-width"><em class="start font-red mr5">*</em>选择日期：</span>
                    <el-date-picker
                        v-model="dataValue"
                        type="date"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        class="input-width"
                        :picker-options="pickerOptions">
                    </el-date-picker>
                </div>
            </div>

            <span slot="footer" class="dialog-footer">
                    <el-button @click="handleDialogClose('close')" class="cancal-button-dynamic">取 消</el-button>
                    <el-button type="primary" @click="handleDialogClose('sure')" class="search-button-dynamic">确 认</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'DateLimitSelect',
    props: {
        dialogVisible: {
            type: Boolean,
            default: false
        },
        dialogTitle: {
            type: String,
            default: '编辑'
        }
    },
    components: {},
    data() {
        return {
            dataMonth: '',
            dataValue: '',
            pickerOptions: {
                disabledDate: (time) => {
                    if (this.dataMonth) {
                        let _t = new Date(this.dataMonth),
                        _f = new Date(_t.getFullYear(),_t.getMonth()+1, 1).getDate(),
                        _l = new Date(_t.getFullYear(),_t.getMonth()+1, 0).getDate();
                        const firstTime = new Date(this.dataMonth+'-'+_f).getTime();
                        const lastTime = new Date(this.dataMonth+'-'+_l).getTime();
                        return time.getTime() < firstTime || time.getTime() > lastTime
                    }
                }
            } 
        }
    },
    created() {
    },
    computed: {
    },
    watch: {
    },
    methods: {
        handleDialogClose(type) {
            this.$emit('handleDialogOperate', type === 'sure' ? true : false, this.dialogDetailContent)
        },
        handleChange(val) {
            this.dataValue = val+'-01';
        }
    }
}
</script>

<style lang="less" scoped>
.dflex{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.dflex-width {
    .dflex;
    margin: 10px 0;
    flex: percentage(1/1);
    width: percentage(1/1);
    box-sizing: border-box;
}
.dflex-warp{
    .dflex;
    flex-wrap: wrap;
}
.label-width{
    width: 160px;
    text-align: right;
    display: inline-block;
}
.input-width{
    min-width: 220px;
    width: percentage(1/2);
}
.font-red{
    color: red;
}
.table-desc-title{
    font-size: 12px;
    color: #000000;
    font-weight: 500;
}
.start{
    display: inline-block;
    width: 6px;
}
</style>