一
做移动端开发需要经常设置时间选择,因此做总结如下
具体页面样式
image.png
直接上代码
<template>
<div class="wrap content">
<van-nav-bar title="操作日志" fixed left-arrow @click-left="onClickLeft" />
<div class="mt-44"></div>
<div class="main">
<van-field v-model="logtype" label="日志类型" :placeholder="'请选择'" input-align="right" readonly right-icon="arrow" @click="showLogType" />
<van-field v-model="bgDate" label="开始时间" :placeholder="'请选择'" input-align="right" readonly right-icon="arrow" @click="showBeginDate" />
<van-field v-model="endDate" label="结束时间" :placeholder="'请选择'" input-align="right" readonly right-icon="arrow" @click="showEndDate" />
</div>
<button @click="goLogDetail" :disabled="disabledFlag" :class="{'button_style': disabledFlag}">查询</button>
<!--picker-->
<van-popup v-model="showPicker" position="bottom">
<van-picker show-toolbar :columns="columns" :default-index="2" @cancel="onCancel" @confirm="onConfirm" />
</van-popup>
<!--日期选择弹框-->
<van-popup v-model="showPickerDate" position="bottom">
<van-datetime-picker v-model="currentDate" type="date" @cancel="onCancelDate" @confirm="onConfirmDate" :min-date="minDate" :max-date="maxDate" :formatter="formatter" />
</van-popup>
<van-popup v-model="showPickerDate1" position="bottom">
<van-datetime-picker v-model="currentDate1" type="date" @cancel="onCancelDate1" @confirm="onConfirmDate1" :min-date="minDate1" :max-date="maxDate1" :formatter="formatter" />
</van-popup>
</div>
</template>
<script>
export default {
name: 'logQuery',
data () {
return {
columns: [{
text: '登录操作',
type: 'A'
}, {
text: '账务交易',
type: 'B'
}, {
text: '明细查询',
type: 'C'
}, {
text: '其他操作',
type: 'D'
}],
showPicker: false,
minDate: new Date(2019, 0, 1),
maxDate: new Date(),
minDate1: new Date(2019, 0, 1),
maxDate1: new Date(),
currentDate: new Date(),
currentDate1: new Date(),
showPickerDate: false,
showPickerDate1: false,
logtype: '',
bgDate: '', // 查询时间
endDate: ''
}
},
watch: { // 使用时间选择器,需要配合watch监听选择时间值的变化,进而设置最小值和最大值
bgDate: function (val) {
if (val === '') {
return
}
let bgDate1 = new Date(val)
bgDate1.setMonth(bgDate1.getMonth() + 3)
let date = bgDate1.getFullYear() + '-' + (bgDate1.getMonth() + 1) + '-' + bgDate1.getDate()
this.minDate1 = new Date(val)
this.maxDate1 = new Date(date)
},
endDate: function (val) {
if (val === '') {
return
}
let bgDate2 = new Date(val)
bgDate2.setMonth(bgDate2.getMonth() - 3)
let date = bgDate2.getFullYear() + '-' + (bgDate2.getMonth() + 1) + '-' + bgDate2.getDate()
this.minDate = new Date(date)
this.maxDate = new Date(val)
}
},
computed: {
disabledFlag () { //点击按钮的计算属性
return !this.bgDate || !this.endDate
}
},
methods: {
onClickLeft () {
this.$router.go(-1)
},
// 日期组件自定义格式
formatter (type, value) {
if (type === 'year') {
this.value1 = value // 可以拿到当前点击的数值
return `${value}年`
} else if (type === 'month') {
this.value2 = value
return `${value}月`
}
this.value3 = value
return `${value}日`
},
onCancelDate () {
this.showPickerDate = false
},
onConfirmDate () {
console.log('date111--',this.value1) // 数值来自日期组件自定义格式的方法回调
console.log('date222--',this.value2)
console.log('date333--',this.value3)
this.bgDate = `${this.value1}-${this.value2}-${this.value3}` // 字符串拼接 结果入2020-07-03
this.onCancelDate()
},
onCancelDate1 () {
this.showPickerDate1 = false
},
onConfirmDate1 () {
this.endDate = `${this.value1}-${this.value2}-${this.value3}`
this.onCancelDate1()
},
showLogType () {
this.showPicker = true
},
// 取消选择账号
onCancel () {
this.showPicker = false
},
// 确认选择日志类型
onConfirm (value, index) {
this.logtype = value.text
this.logflag = value.type
this.onCancel()
},
// 显示查询日期
showBeginDate () {
this.showPickerDate = true
},
showEndDate () {
this.showPickerDate1 = true
},
}
}
</script>
<style lang="scss" scoped>
</style>
// 对监听bgDate的理解
bgDate: function (val) {
if (val === '') {
return
}
let bgDate1 = new Date(val) // 假如val为选择的2020-07-03
console.log('bg11---',bgDate1) // bg11--- Fri Jul 03 2020 08:00:00 GMT+0800 (中国标准时间) 七月三日
console.log('bm---',bgDate1.getMonth()) // bm--- 6 表示七月
// 这里加3,是因为开发需求要求选择开始日期后,结束日期只能为四个月之间,不能超过四个月外,比如选择了2020-07-03,则结束日期的最大值为10月对应的日期
bgDate1.setMonth(bgDate1.getMonth() + 3) //设置具体的月份,这里是将月份设置在未来三个月后
console.log('bg---',bgDate1) // bg--- Sat Oct 03 2020 08:00:00 GMT+0800 (中国标准时间) 十月三日
console.log('bm---',bgDate1.getMonth()) // bm--- 9 表示十月
// 这里的bgDate1 是设置后的月份的日期
let date = bgDate1.getFullYear() + '-' + (bgDate1.getMonth() + 1) + '-' + bgDate1.getDate()
this.minDate1 = new Date(val) // 当前时间为最小值
this.maxDate1 = new Date(date) // 用设置后的月份取得的date对象设定最大值
},
// 选择开始日期后,就决定了结束时间的最小值为开始的日期,最大值为设定后三个月的日期(+3)
// 同理,假如选择结束日期,则开始日期的最小值为设定前三个月的日期(-3),最大值为开始的日期
这样方便理解
<1>选择开始时间为2020-07-03,则结束时间的最大值为
image.png
选择开始时间为2020-07-03,则结束时间的最小值为
image.png
<2>选择结束时间为2020-07-03,则开始时间的最大值为
image.png
选择结束时间为2020-07-03,则开始时间的最小值为
image.png
关于日期月份的两个方法
setMonth() 方法用于设置月份。
dateObject.setMonth(month,day)
month 必需。一个表示月份的数值，该值介于 0（一月） ~ 11（十二月） 之间。
day 可选。一个表示月的某一天的数值，该值介于 1 ~ 31 之间（以本地时间计）。
//具体使用百度一下
getMonth() 方法可返回表示月份的数字。
dateObject.getMonth()
返回值
dateObject 的月份字段，使用本地时间。返回值是 0（一月） 到 11（十二月） 之间的一个整数。
二
按时间最长支持查询一年内的数据
页面如下
image.png
结构
<div class="filter-title">
<div class="left-box">按时间</div>
<div class="right-box add_title">
<div class="new_left" @click="showBeginDate">
<div>{{bgDate}}</div>
<div class="right-arrow"></div>
</div>
<span></span>
<div class="new_left" @click="showEndDate">
<div>{{endDate}}</div>
<div class="right-arrow"></div>
</div>
</div>
</div>
<!--日期选择弹框-->
<van-popup v-model="showPickerDate" position="bottom">
<van-datetime-picker v-model="currentDate" type="date" @cancel="onCancelDate" @confirm="onConfirmDate" :min-date="minDate" :max-date="maxDate" :formatter="formatter" />
</van-popup>
<van-popup v-model="showPickerDate1" position="bottom">
<van-datetime-picker v-model="currentDate1" type="date" @cancel="onCancelDate1" @confirm="onConfirmDate1" :min-date="minDate1" :max-date="maxDate1" :formatter="formatter" />
</van-popup>
逻辑
data () {
return {
minDate: new Date(), // 开始日期起始值
maxDate: new Date(), // 开始日期截止值
minDate1: new Date(), // 结束日期起始值
maxDate1: new Date(), // 结束日期截止值
currentDate: new Date(),
currentDate1: new Date(),
}
}
// 在created阶段获取到当前时间并且确定一年前的今日作为最小日期
created () {
this.minDate = this.getPassYearFormatDate() // 当前日期推前一年
this.minDate1 = this.getPassYearFormatDate() // 当前日期推前一年
},
methods: {
// 一年前的日期
getPassYearFormatDate () {
let nowDate = new Date()
let date = new Date(nowDate)
date.setDate(date.getDate() - 365)
return new Date(date.getFullYear(), date.getMonth(), date.getDate())
},
// 点击确认获取到选择的时间,确定开始时间后就可以以此作为结束日期的最小值
onConfirmDate (val) {
this.bgDate = utils.changeDate(val, 3)
this.minDate1 = val // 设结束日期的开始值
this.onCancelDate()
},
onConfirmDate1 (val) {
this.endDate = utils.changeDate(val, 3)
this.onCancelDate1()
},
思路
// 1.一开始设定当前时间的一年内(减去356天)作为两个下拉框的最小值
// 2.点击确定开始时间,限定结束时间范围为选择的开始时间至结束时间的最大值
// 3.开始时间和结束时间的最大值都是当前的时间new Date()
}
注意这种写法
image.png
时间处理的公共方法
/**
* 转换日期格式，结果如20200308
* @param time 时间格式，如new Date()
* @param type type为1则转换成yyyymmdd格式，type为2则转换成yyyymm格式, type为3时，转换为yyyy-mm-dd
* @returns {string}
*/
const changeDate = (time, type) => {
let temp_time = new Number(time)
let temp_date = new Date(temp_time)
let temp_year1 = ""
let temp_month1 = ""
let temp_day1 = ""
if (type == 1) {
temp_year1 = temp_date.getFullYear()
temp_month1 = (temp_date.getMonth() + 1) > 9 ? (temp_date.getMonth() + 1) : "0" + (temp_date.getMonth() + 1)
temp_day1 = (temp_date.getDate()) > 9 ? (temp_date.getDate()) : "0" + (temp_date.getDate())
return temp_year1.toString() + temp_month1.toString() + temp_day1.toString()
} else if (type == 2) {
temp_year1 = temp_date.getFullYear()
temp_month1 = (temp_date.getMonth() + 1) > 9 ? (temp_date.getMonth() + 1) : "0" + (temp_date.getMonth() + 1)
return temp_year1.toString() + temp_month1.toString()
} else if (type == 3) {
temp_year1 = temp_date.getFullYear()
temp_month1 = (temp_date.getMonth() + 1) > 9 ? (temp_date.getMonth() + 1) : "0" + (temp_date.getMonth() + 1)
temp_day1 = (temp_date.getDate()) > 9 ? (temp_date.getDate()) : "0" + (temp_date.getDate())
return temp_year1.toString() + '-' + temp_month1.toString() + '-' + temp_day1.toString()
}
}
