vue2 + Element项目
需求
- 进入页面时 日期时间选择器默认展示本月一号到昨天
- 点击重置时，不置空，展示默认日期时间
- 默认时间00:00:00到23:59:59
- 当天为一号时，默认查上月一号00:00:00到上月最后一天23:59:59
在网上找了半天也没找到合适的，于是参考网上的案例进行修改，达到了自己想要的效果
在项目中封装的获取日期的公用方法
// 得到本月、上月、下月的起始、结束日期
// type为字符串类型，有两种选择，"s"代表开始,"e"代表结束，months为数字类型，0代表本月，-1代表上月，1代表下月
getMonth(type, months) {
var d = new Date()
var year = d.getFullYear()
var month = d.getMonth() + 1
if (Math.abs(months) > 12) {
months = months % 12
}
if (months != 0) {
if (month + months > 12) {
year++
month = (month + months) % 12
} else if (month + months < 1) {
year--
month = 12 + month + months
} else {
month = month + months
}
}
month = month < 10 ? '0' + month : month
var date = d.getDate()
var firstday = year + '-' + month + '-' + '01'
var lastday = ''
if (
month == '01' ||
month == '03' ||
month == '05' ||
month == '07' ||
month == '08' ||
month == '10' ||
month == '12'
) {
lastday = year + '-' + month + '-' + 31
} else if (month == '02') {
if ((year % 4 == 0 && year % 100 != 0) || (year % 100 == 0 && year % 400 == 0)) {
lastday = year + '-' + month + '-' + 29
} else {
lastday = year + '-' + month + '-' + 28
}
} else {
lastday = year + '-' + month + '-' + 30
}
var day = ''
if (type == 's') {
day = firstday
} else {
day = lastday
}
return day
},
下面开搞
methods中定义函数
// 默认时间，当月一号到当前日期前一天
defaultDate() {
//获取新的时间
let date = new Date()
//获取当前时间的年份转为字符串
let year = date.getFullYear().toString()
//获取月份，由于月份从0开始，此处要加1，判断是否小于10，如果是在字符串前面拼接'0'
let month =
date.getMonth() + 1 < 10
? '0' + (date.getMonth() + 1).toString()
: (date.getMonth() + 1).toString()
//获取天，减一得到昨天
let da = date.getDate() - 1
//当一号的时候,获取上月一号到最后一天
if (da == 0) {
let beg = `${getDateFn.getMonth('s', -1)}` + ' ' + '00:00:00'
let end = `${getDateFn.getMonth('e', -1)}` + ' ' + '23:59:59'
this.queryParams.createTime = [beg, end]
this.queryParams.startTime = beg
this.queryParams.endTime = end
}else{
//判断是否小于10，如果是在字符串前面拼接'0'
let day = da < 10 ? '0' + da.toString() : da.toString()
//字符串拼接，开始时间，结束时间
let end = year + '-' + month + '-' + day + ' ' + '23:59:59' //昨天
let beg = year + '-' + month + '-01' + ' ' + '00:00:00' //当月第一天
this.queryParams.createTime = [beg, end] //将值设置给日期选择器
this.queryParams.startTime = beg
this.queryParams.endTime = end
}
},
- 筛选查询是封装的公用组件 点击重置默认时间消失 若重置保留默认时间
父组件中使用子组件
<headerBox :queryParamsProp="queryParams" @searchClick="searchClick" />
// 封装的子组件中
<el-button type="primary" size="small" icon="el-icon-search" @click="searchClick(true)">
搜索
</el-button>
<el-button icon="el-icon-refresh" size="small" @click="searchClick(false)">
重置
</el-button>
- 在查询、重置 的点击事件中 设置一个标识 表明是查询还是重置(如：我使用的是type)
searchClick(flag) {
if (!flag)
{
this.queryParams = {}
this.queryParams.type = 'reset'
} else {
this.queryParams.type = 'search'
if (
this.$isNotEmpty(this.queryParams.createTime && this.queryParams.createTime.length > 0)
)
{
this.queryParams.startTime = this.queryParams.createTime[0]
this.queryParams.endTime = this.queryParams.createTime[1] }
}
this.$emit('searchClick', this.queryParams)
}
- 在父组件中 的查询事件中 判断传来的是查询还是重置 如果是重置 执行获取默认时间的方法
// 搜索调用的方法
searchClick(data) {
this.queryParams = data
if (data.type == 'reset') {
this.defaultDate()
}
this.queryParams.pageIndex = 1
this.queryParams.pageSize = 10
this.getList()
}
- 这时 出现了另一个问题 查询、重置都可用 但是当重置后 再次选择日期不回显
// 只需在日期时间选择器 加一个强制刷新方法
<el-date-picker
v-model="queryParams.createTime"
:popper-class="$store.getters.device === 'mobile' ? 'dateClass' : ''"
:picker-options="pickerOptions"
:editable="false"
:default-time="['00:00:00', '23:59:59']"
value-format="yyyy-MM-dd HH:mm:ss"
type="daterange"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
style="width: 100%"
@input="changeDate"
>
</el-date-picker>
// 子组件methods中
changeDate() {
this.$forceUpdate()
},
以上为我本次项目解决方案，如有更好的方式，欢迎评论。。。
