element ui el-date-picker日期时间选择器 设置只能选择不大于30天时间范围
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
需求:要求日期时间选择器只能选择最多32天,其他日期为不可点击状态。
日期组件type为daterange或者datetimerange都生效
实现(vue2.x):
通过属性picker-options
<el-date-picker
v-model="dateTime"
type="datetimerange"
align="right"
range-separator="- "
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
@blur="isRestart = true"
:default-time="['00:00:00', '23:59:59']"
value-format="yyyy-MM-dd HH:mm:ss"
:clearable="dateClear"
style="width:216px;">
</el-date-picker>
data(
return{
isRestart: false,
pickerMinDate: '',
pickerOptions: {
onPick: ({
maxDate,
minDate,
}) => {
this.isRestart = false;
this.pickerMinDate = minDate.getTime();
if (maxDate) {
this.pickerMinDate = "";
disabledDate: (time) => {
if (this.pickerMinDate !== "") {
const one = 32 * 24 * 3600 * 1000;
const minTime = this.pickerMinDate - one;
const maxTime = this.pickerMinDate + one;
return time.getTime() < minTime || time.getTime() > maxTime;
效果
参考链接:https://www.jianshu.com/p/2a07de981fab
GitHub 加速计划 / eleme / element
10
A Vue.js 2.0 UI Toolkit for Web
最近提交
(Master分支:4 个月前 )
c345bb45
8 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md
8 个月前
所有评论(0)