uni-app计算入学(职)时间要比离职时间晚
2023-09-11 14:19:18 时间
Uni-app 入职时间比离职时间要晚
**业务需求:**通过使用picker
进行获取入职时间和离职时间(如: 入:2022-4-1;离:2021-3-1
)不可以提交表单 点击此处查看Picker的使用文档
通过@change去改变该事件,也就是说我们需要定义一个方法进行获取,然后再定一个计算方法进行比较即可实现!
我们需要先在data中定义
startTime
,endTime
; 然后再定义两个方法,一个是入学时间函数changeStartTime
,毕业时间函数changeEndTime
;其次就是我们开始一个计算方法computedTime
用于计算传过来的时间,变成时间戳进行比较(通过new Date)的valueOf进行比较。然后在校验中进行判断拦截提交的方式实现该功能。如果需要很多的地方进行使用该功能,可以封装一个组件,然后定义错误值进行复用!
代码实现
代码有点简单,可以粗略查看一下,仅供参考哈!
<tempalte>
<view class="user_info_item">
<label for="" class="user_info_label">在校时间</label>
<view class="flex_between time_picker">
<picker mode="date" :value="绑定参数" :start="'1950-1-1'" @change="changeStartTime"
data-type="entry_date" data-name="edu_exp">
<view class="picker">{{value="绑定参数"==''?'入学时间':'绑定参数'}}</view>
</picker>
<text class="text_icon">-</text>
<picker mode="date" :value="绑定参数" :start="'1950-1-1'" @change="changeEndTime"
data-type="leave_date" data-name="edu_exp">
<view class="picker">{{value="绑定参数"==''?'毕业时间':'绑定参数'"}}</view>
</picker>
</view>
</view>
</tempalte>
<script>
export default {
data() {
return {
startTime:'',
endTime:''
}
},
methods:{
//改变时间
changeTime(e, keyName) {
let type = e.currentTarget.dataset.type
let name = e.currentTarget.dataset.name
let value = e.detail.value
let nameInfo = this[name]
nameInfo[type] = value
this[nameInfo] = nameInfo
// 转换时间进行对比
let val = this.computedTime(value)
this[keyName] = val
},
// 开始时间
changeStartTime(e) {
this.changeTime(e, 'startTime')
},
// 结束时间
changeEndTime(e) {
this.changeTime(e, 'endTime')
},
// 计算时间戳
computedTime(str) {
return new Date(str).valueOf();
},
validityData(){
if(this.startTime > this.endTime) {
uni.showToast({
title: '填写的入学日期有误',
icon: 'none'
})
return
}
}
}
}
</script>
相关文章
- 日期倒计时软件有哪些?可以计算倒数日期的APP
- IOS应用程序发布到苹果APP STORE
- [AngularJS]1. Fisrt App, ng-app, Exprection{{}}
- uni-app:微信小程序:使用位置权限getlocation时报错(hbuilderx 3.7.3)
- 上线一月破千万,孙俪都是其粉丝,揭秘花粉儿APP的成长秘诀
- Atitit.提升软件Web应用程序 app性能的方法原理 h5 js java c# php python android .net
- 从手机App到网点交互请求的日志记录
- vue 的 render 函数的用法:new Vue({ render: h => h(App), }).$mount(‘#app‘)
- Android问题笔记 - 安装APP成功但Android Studio无法直接启动?
- 〖Python APP 自动化测试实战篇⑥〗- 实战 - appium 定位手机元素之常用的元素定位方法
- Android 4.3 系统裁剪——删除不使用的app及添加自己app
- uni-app_uView1.0 实现自动轮播图功能
- 十六、Fiddler抓包工具详细教程 — 抓取移动端App请求