elementUI(datepicker)限制日日期的选择

简介: 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>


1425695-20200329200032615-320512719.png


相关文章
|
自然语言处理 前端开发 JavaScript
最好用的 8 款 React Datepicker 时间日期选择器测评推荐
React 时间日期选择器(date-timepicker)组件,与表单、富文本、表格、拖拽等组件一样,是大家用 React 搭建项目时使用最频繁的组件之一。React DateTimePicker 除了基础选择日期时间外,还有非常多样的功能配合不同场景使用,比如 12/24小时,禁止选择某些日期,高亮某些日期,夜间模式,多语言,酒店订单的特别场景等。本文记录了我自己使用多年最好用的 8 款 React DateTimePicker 组件,每一款都经过我实际测试,推荐给大家。
1850 0
最好用的 8 款 React Datepicker 时间日期选择器测评推荐
|
JavaScript 机器学习/深度学习 UED
jQuery weui时间选择器datetimepicker只要年月日解决方案
只想选择年月日,jquery-weui建议使用日历但实际的需求如果选择生日等等,日历选择的用户体验很不好,所以进行源码修改,看下面颜色标注。 HTML部分 下面是JS部分 $("#birth").
4976 0
|
3月前
Vue3日期选择器(DatePicker)
该组件基于 **@vuepic/vue-datepicker@9.0.1** 进行二次封装,简化了日常使用。除范围和年选择器外,其他日期选择均返回格式化的字符串。提供了多种自定义设置,如日期选择器宽度、模式、格式等,并支持时间选择和“今天”按钮展示。详细配置及更多功能请参考[官方文档](https://vue3datepicker.com/installation/)。组件已集成所有原生属性,并支持主题颜色自定义。 示例代码展示了如何创建和使用日期选择器组件,包括基本使用、禁用日期、日期时间选择器、范围选择器等多种场景。更多功能和样式可通过官方文档了解。
289 2
Vue3日期选择器(DatePicker)
|
6月前
|
JavaScript UED
【vue】iview组件 DatePicker 日期选择器如何显示默认当前日期
【vue】iview组件 DatePicker 日期选择器如何显示默认当前日期
427 1
|
JavaScript 前端开发 程序员
vue的年月日时间选择器
vue的年月日时间选择器
92 0
|
JavaScript 前端开发 程序员
vue的 DatePicker 日期选择器,把选择的日期转化成需要格式传值
vue的 DatePicker 日期选择器,把选择的日期转化成需要格式传值
329 1
|
JavaScript 前端开发 程序员
DatePicker 日期选择器,获取系统默认当前年月日
DatePicker 日期选择器,获取系统默认当前年月日
468 0
|
前端开发 JavaScript
react获取Datepicker组件日期
react获取Datepicker组件日期