话不多说,上效果图
HTML代码
<template>
<div class="profly-layout">
<!-- 开始时间 -->
<van-field
v-model="selectDate.startObj.textTime"
label="开始时间"
right-icon="arrow-down"
readonly
@click="showDataBox('startTime', selectDate.startObj.objectDate)"
/>
<!-- 结束时间 -->
<van-field
v-model="selectDate.endObj.textTime"
label="结束时间"
right-icon="arrow-down"
readonly
@click="showDataBox('endTime', selectDate.endObj.objectDate)"
/>
<!-- 请假时长 -->
<van-field
v-model="selectDate.intervalHourse"
disabled
label="请假时长"
class="hour"
/>
<!-- 请假时间弹框 -->
<van-popup v-model="selectDate.dateShow" position="bottom">
<div class="wrapper">
<van-datetime-picker
v-model="selectDate.currentDate"
type="datetime"
:min-date="selectDate.minDate"
:max-date="selectDate.maxDate"
@confirm="confirmDate"
@cancel="cancelDate"
:filter="dateFilter"
/>
</div>
</van-popup>
</div>
</template>
JS代码
<script>
import { getStringTime, stringTimeStyle } from '../common/commonJs'
export default {
name: 'profly',
data() {
return {
selectDate: {
startObj: {
textTime: '', //*2021-02-03 10:00:00格式
objectDate: new Date(), //*The May ...格式
date: '', //*20210203100000
},
endObj: {
textTime: '', //*2021-02-03 10:00:00格式
objectDate: new Date(), //*The May ...格式
date: '', //*20210203100000
},
intervalHourse: '', //*间隔时长
currentDate: new Date(), //*请假时间弹框的时间选择
choseTimeType: '', //*当前选择的时间类型
dateShow: false, //*是否显示时间选择弹层
minDate: new Date( //*前后五年
parseInt(getStringTime(new Date(), 'year')) - 5,
0,
1
),
maxDate: new Date(
parseInt(getStringTime(new Date(), 'year')) + 5,
11,
31
),
},
}
},
methods: {
/**
* 监听方法
*/
//显示时间弹框
showDataBox(type, time) {
console.log(123123123)
this.choseTimeType = type
if (time !== undefined || time !== null) {
this.selectDate.currentDate = time
} else {
this.selectDate.currentDate = new Date()
}
this.selectDate.dateShow = true
},
//确认请假时间的选择
confirmDate(e) {
this.setTime(e)
if (this.choseTimeType == 'startTime') {
//* 设置开始时间
this.selectDate.startObj = this.setTime(e)
} else {
//* 设置结束时间
this.selectDate.endObj = this.setTime(e)
}
//*计算请假时长
if (
!(
this.selectDate.startObj.textTime.length !== 0 &&
this.selectDate.endObj.textTime.length !== 0
)
) {
//*关闭弹层
return this.cancelDate()
}
let bool = this.calcleDate()
if (!bool) {
this.$toast('时间选择错误!')
}
//*关闭弹层
this.cancelDate()
},
//* 设置时间
setTime(e) {
return {
date: getStringTime(e, 'all'),
textTime: `${stringTimeStyle(
getStringTime(e, 'ymd'),
'-'
)} ${getStringTime(e, 'hours')}:${getStringTime(e, 'min')}`,
objectDate: e,
}
},
//*计算请假时长
calcleDate() {
let strDateStart = this.selectDate.startObj.objectDate
let strDateEnd = this.selectDate.endObj.objectDate
this.selectDate.intervalHourse = ''
let iHouse = (strDateEnd.getTime() - strDateStart.getTime()) / 1000 / 60 / 60
if (iHouse <= 0) {
this.selectDate.intervalHourse = 0 + '小时'
return false
}
this.selectDate.intervalHourse = Math.round(iHouse * 10) / 10 + ' 小时'
console.log(this.selectDate.intervalHourse)
return true
},
//*关闭弹层
cancelDate() {
this.selectDate.dateShow = false
},
//*时间选择过滤
dateFilter(type, options) {
//*每隔30分钟显示
if (type === 'minute') {
return options.filter((option) => option % 30 === 0)
}
return options
},
//*时间初始化
dateInit() {
this.selectDate.startObj = this.setTime(
new Date(
getStringTime(new Date(), 'year'),
getStringTime(new Date(), 'mon') - 1,
getStringTime(new Date(), 'day'),
getStringTime(new Date(), 'hours')
// getStringTime("00")
)
)
this.selectDate.endObj = this.setTime(
new Date(
getStringTime(new Date(), 'year'),
getStringTime(new Date(), 'mon') - 1,
getStringTime(new Date(), 'day'),
parseInt(getStringTime(new Date(), 'hours')) + 1
)
)
this.calcleDate()
},
/**
* 请求数据
*/
//*获取数据
},
mounted() {
this.dateInit()
},
computed: {},
watch: {},
filters: {},
}
</script>
注:JS中用到的时间方法,在我的时间文章中可以找到