[JavaScript知识库]uni-app计算入学(职)时间要比离职时间晚

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>