Element: [Bug Report] datepicker disabledDate这个配置不能动态设置

Created on 10 Apr 2017 · 5Comments · Source: ElemeFE/element

Element UI version

1.2.8

OS/Browsers version

Mac And Windows

Vue version

2.2.2

Reproduction Link

https://jsfiddle.net/ho0vppo7/

Steps to reproduce

默认时间初始化禁用小于2017-04-12的时间，点击更新时间后把警用时间改成小于2017-04-18时间，但再次选择默认时间时还是禁用小于2017-04-12的时间，应该禁用小于2017-04-18的时间

What is Expected?

禁用时间是可以动态设置的

What is actually happening?

不能动态设置禁用时间

Source

huadong1989

Most helpful comment

已解决

luchanan on 6 Aug 2017

👍4

All 5 comments

改成这样

 var pre_cDate = new Date('2017-04-12');
        var Main = {
            data() {
                return {
                    cDate: pre_cDate,
                    pickerOptions1: {
                        shortcuts: [{
                            text: '今天',
                            onClick(picker) {
                                picker.$emit('pick', new Date());
                            }
                        }, {
                            text: '昨天',
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24);
                                picker.$emit('pick', date);
                            }
                        }, {
                            text: '一周前',
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', date);
                            }
                        }]
                    },
                    value1: '',
                    value2: '',
                };
            },
            computed: {
                pickerOptions0: function () {
                    return {
                        disabledDate(time) {
                            console.log('1');
                            return time.getTime() < this.cDate - 8.64e7;
                        }
                    }

                }
            },
            methods: {
                updateDate: function () {
                    this.cDate = new Date('2017-04-18');
                }
            }
        };
        var Ctor = Vue.extend(Main)
        new Ctor().$mount('#app')

liyangworld on 15 May 2017

@liyangworld 思路很对，但是这样写仍然是有问题的，返回的disabledDate 函数中的 this仍然是子组件的this；因此需要首先把值计算出来；代码如下：

...
 pickerOptions0: function () {
    const dateFlag = this.cDate;
    return {
        disabledDate(time) {
            console.log('1');
            return time.getTime() < dateFlag  - 8.64e7;
        }
    }
}
...