016: el-date-picker specified date disable setting example

No. 016

View column directory: VUE — element UI

When using el-date-picker, in some cases it is necessary to disable a certain period of time.

HTML

<el-date-picker size="mini" v-model="time" type="daterange" :range-separator="$t('common.to')" 
    :start-placeholder="$t('common.stime')" :end-placeholder="$t('common.etime')" 
    style="width: 300px;" value-format="yyyy-MM-dd" :picker-options="pickerOptions"> 
</el-date-picker> 

Example one:

data:

pickerOptions:{
disabledDate(time) {
return time.getTime() > Date.now()-246060*1000
}

},

Example two:

data:

pickerOptions:{
disabledDate(time) {
return time.getTime() < Date.now()
}
},

column goal

Under the control of the joint technology stack of vue and element UI, this column provides effective source code examples and introduction of information points to achieve flexible use.

(1) Provide some basic operations of vue2: installation, reference, template use, computed, watch, life cycle (beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed, activated, deactivated, errorCaptured, components,), $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else , v-else-if, v-on, v-pre, v-cloak, v-once, v-model, v-html, v-text, keep-alive, slot-scope, filters, v-bind,. stop, .native, directives, mixins, render, internationalization, Vue Router, etc.

（2）提供element UI的经典操作：安装，引用，国际化，el-row，el-col，el-button，el-link，el-radio，el-checkbox，el-input，el-select, el -cascader, el-input-number, el-switch,el-slider, el-time-picker, el-date-picker, el-upload, el-rate, el-color-picker, el-transfer, el-form , el-table, el-tree, el-pagination, el-badge, el-avatar, el-skeleton, el-empty, el-descriptions, el-result, el-statistic, el-alert, v-loading, $ message, $alert, $prompt, $confirm , $notify, el-breadcrumb, el-page-header,el-tabs ,el-dropdown,el-steps,el-dialog, el-tooltip, el-popover, el- popconfirm, el-card, el-carousel, el-collapse, el-timeline, el-divider, el-calendar, el-image, el-backtop，v-infinite-scroll， el-drawer等