vue日期选择框之时间范围的使用介绍
更新时间：2022年05月31日 11:03:29 作者：itfallrain
这篇文章主要介绍了vue日期选择框之时间范围的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue日期选择框之时间范围
实现效果如下
<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
}vue日期控件解析
<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> 以上template视图层
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()
);
}
},
},
};script 逻辑层
效果
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue3基于script setup语法$refs的使用，<BR> 在用vue3开发项目的时候，需要调用子组件的方法，于是想着用$refs来实现，但是我是使用script setup语法糖，原先vue2的语法已经不适用了。下面我们一起进入文章看详细内容吧</P><P>2021-12-12
这篇文章主要为大家详细介绍了vue+element UI实现树形表格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
这篇文章主要为大家详细介绍了VUE多个下拉框实现双向联动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
下面小编就为大家分享一篇浅谈Vue Element中Select下拉框选取值的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
v-for指令是在模板编译的代码生成阶段实现的，当遍历数组或对象时需要使用列表渲染指令v-for。本文主要为大家介绍了v-for指令的基本用法，希望对大家有所帮助2023-04-04
这篇文章主要为大家介绍了element-ui表单提交自动清空隐藏表单值实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要为大家详细介绍了vue+element tabs选项卡分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
在Web开发中,页面间的跳转及数据刷新是常见问题,通过使用$router.push和$router.replace方法,可以控制页面跳转的行为,具体操作时,若发现页面ID变更后数据未刷新,可通过给router-view标签添加key值解决,若使用keep-alive2024-10-10
这篇文章主要为大家详细介绍了vue.js实现一个漂亮、灵活、可复用的提示组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了解决vue跨域axios异步通信问题，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-04-04
最新评论