美文网首页
element 日期插件 最多可选择一个月的写法

element 日期插件 最多可选择一个月的写法

作者: 流泪手心_521 | 来源:发表于2020-11-09 17:01 被阅读0次

el-date-picker 最多只能选中一个月 选中第一个日期后 第二个日期给出可选范围限制
el-date-picker 选中第一个日期后 第二个日期给出可选范围

效果: 选中2020年10月1日之后 11月1号 11月1号之后的不可选中


image.png

结构

<el-form-item label="发送时间" prop="">
                            <el-date-picker
                                    v-model="headForm.date"
                                    type="datetimerange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    :clearable="true"
                                    :picker-options="pickerOptions"
                                    :default-time="['00:00:00', '23:59:59']">
                            </el-date-picker>
                        </el-form-item>

js data里面的代码

choiceDate0: '',
                pickerOptions: {
                    // 设置不能选择的日期
                    onPick: ({ maxDate, minDate }) => {
                        this.choiceDate0 = minDate.getTime();
                        if (maxDate) {
                            this.choiceDate0 = '';
                        }
                    },
                    disabledDate:
                        (time) => {
                            let choiceDateTime = new Date(this.choiceDate0).getTime();
                            const minTime = new Date(choiceDateTime).setMonth(new Date(choiceDateTime).getMonth() - 1);
                            const maxTime = new Date(choiceDateTime).setMonth(new Date(choiceDateTime).getMonth() + 1);
                            const min = minTime;
                            const newDate = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1;
                            const max = newDate < maxTime ? newDate : maxTime;
                            //如果已经选中一个日期 则 返回 该日期前后一个月时间可选
                            if (this.choiceDate0) {
                                return time.getTime() < min || time.getTime() > max;
                            }
                            //若一个日期也没选中 则 返回 当前日期以前日期可选
                            return time.getTime() > newDate;
                        }
                },

相关文章

网友评论

      本文标题:element 日期插件 最多可选择一个月的写法

      本文链接:https://www.haomeiwen.com/subject/pfxrbktx.html