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 逻辑层
效果
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于vue使用echarts词云图的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
这篇文章主要介绍了vue.js中如何导出Excel表格,在项目中经常会遇到这样的需求，今天小编分步骤通过实例代码给大家详细介绍，需要的朋友可以参考下2019-06-06
下面小编就为大家分享一篇Vue-路由导航菜单栏的高亮设置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
表单校验是注册环节中必不可少的操作,表单校验可以提醒用户填写数据规则以确保用户提交数据的效性,也可以防止用户因误操作而占用服务器资源,这篇文章主要给大家介绍了关于Vue系列之Element UI表单自定义校验规则的相关资料,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了Vue3-pinia状态管理,pinia是 vue3 新的状态管理工具，简单来说相当于之前 vuex，它去掉了 Mutations 但是也是支持 vue2 的，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue组件props不同数据类型传参的默认值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
我们在平时做业务的时候,父子组件通信会经常用到ref,这篇文章主要给大家介绍了关于vue3循环设置ref并获取的解决方案,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了Vue 重置data的数据为初始状态操作方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2021-03-03
这篇文章主要介绍了vuex store 缓存存储原理，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
在现代Web开发中,Vue.js与Flask或Django配合使用,实现前后端分离,提高开发效率和应用性能,本文介绍了整合Vue.js和Flask/Django的步骤,包括环境搭建、API编写、项目配置,以及生产部署,此架构不仅加快了开发进程,还提高了项目的可维护性和可扩展性2024-09-09
最新评论