目录Vue日期选择框之时间范围实现效果如下vue日期控件解析以上template视图层script 逻辑层vue日期选择框之时间范围 实现效果如下 <a-col :xl="
<a-col :xl="8" :lg="16" :md="24" :sm="32">
<a-fORM-item label="时间" >
<a-range-picker
style="width: 350px"
v-model="queryParam.createTimeRange"
:disabled-time="disabledRangeTime"
:show-time="{
hideDisabledOptions: true,
defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
}"
format="YYYY-MM-DD HH:mm:ss"
:placeholder="['开始时间', '结束时间']"
@change="onDateChange"
@ok="onDateOk"
/>
</a-form-item>
</a-col>
1:引入格式化工具
import moment from 'moment'
2:给默认值
queryParam:{
createTimeRange:[
moment(new Date(new Date(new Date().toLocaleDateString()).getTime()),'YYYY-MM-DD HH:mm:ss'),
moment(new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1),'YYYY-MM-DD HH:mm:ss')
]
},
3:methods书写的方法
methods: {
moment,
//时间相关函数 start
onDateChange: function (value, dateString) {
console.log(dateString[0],dateString[1]);
this.queryParam.startTime=dateString[0];
this.queryParam.endTime=dateString[1];
},
onDateOk(value) {
console.log(value);
},
range(start, end) {
const result = [];
for (let i = start; i < end; i++) {
result.push(i);
}
return result;
},
disabledRangeTime(_, type) {
if (type === 'start') {
return {
disabledHours: () => this.range(0, 60).splice(60, 60),
disabledMinutes: () => this.range(0, 60).splice(60, 60),
disabledSeconds: () => this.range(0, 60).splice(60, 60),
};
}
return {
disabledHours: () => this.range(0, 60).splice(60, 60),
disabledMinutes: () => this.range(0, 60).splice(60, 60),
disabledSeconds: () => this.range(0, 60).splice(60, 60),
};
},
//时间相关函数 end
}
<el-form-item label="有效期限" >
<el-col :span="6">
<el-form-item>
<el-date-picker
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd 00:00:00"
v-model="effectiveStartTime"
:picker-options="pickerOptionsStart"
></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="6">
<el-form-item>
<el-date-picker
placeholder="选择日期"
value-format="yyyy-MM-dd 00:00:00"
v-model="effectiveEntTime"
:picker-options="pickerOptionsEnd"
></el-date-picker>
</el-form-item>
</el-col>
</el-form-item>
return {
effectiveEntTime: "",
effectiveEntTime: "",
pickerOptionsStart: {
//开始有效期
disabledDate: (time) => {
if (this.effectiveEntTime) {
return time.getTime() > new Date(this.effectiveEntTime).getTime();
}
},
},
pickerOptionsEnd: {
//结束有效期
disabledDate: (time) => {
if (this.effectiveStartTime) {
return (
time.getTime() - 3600 * 1000 * 24 <
new Date(this.effectiveStartTime).getTime() - 86400000 ||
Date.now() - 3600 * 1000 * 24 > time.getTime()
);
}
},
},
};
效果
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: vue日期选择框之时间范围的使用介绍
本文链接: https://www.lsjlt.com/news/150244.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0