elementUI(datepicker)限制日日期的選擇


指定起始日期,后選的將會受到先選的限制
參考地址 https://www.jianshu.com/p/c59c8ef6c500
實現方法不難,利用了 change 事件,動態改變 picker-options 中的 disableDate 即可。
其實這個方法 是我從上面這個大佬身上拷貝過來的。目的是為了下次遇見的時候。
也可以快速解決問題、至於為什么這么用。我也沒有弄明白。
你們可以去問大佬 https://www.jianshu.com/p/c59c8ef6c500

  <div id="app">
        <div class="block">
            <span class="demonstration">起始日期</span>
            <el-date-picker v-model="startDate" type="date" placeholder="選擇日期" :picker-options="pickerOptionsStart"
                @change="changeEnd">
            </el-date-picker>
        </div>

        <div class="block">
            <span class="demonstration">截止日期</span>
            <el-date-picker v-model="endDate" type="date" placeholder="選擇日期" :picker-options="pickerOptionsEnd"
                @change="changeStart">
            </el-date-picker>
        </div>
    </div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {

                
                pickerOptionsStart: {},
                pickerOptionsEnd: {},
                startDate: '',
                endDate: '',
            };
        },
     
        methods: {
            changeStart() {
                // 賦值
                this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
                    disabledDate: (time) => {
                        return time.getTime() > this.endDate
                    }
                })
            },

            changeEnd() {
                this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
                    disabledDate: (time) => {
                        return time.getTime() < this.startDate
                    }
                })
            }
        }
    })
</script>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM