el-date-picker设置日期默认值两种方法(当月月初至月末)
作者：kobe_IT
这篇文章主要给大家介绍了关于el-date-picker设置日期默认值(当月月初至月末)的相关资料,文中通过代码示例将解决的办法介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
1.ElementUI日期样式
<el-date-picker
v-model="queryParams.signDate"
type="daterange"
align="right"
unlink-panels
size="small"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions">
</el-date-picker>2.定义数据以及方法
这里面的signDate可以赋值为空字符''或者赋值为空数组[]，这里面包含两个值，一个值为开始日期，另一个值为结束日期
<script>
export default {
data() {
return {
queryParams: {
signDate: ''
},
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
picker.$emit('pick', [start, end])
}
}]
}
}
},
created() {
// 初始化默认时间
this.defaultDate()
},
methods: {
// 初始化默认时间
defaultDate() {
var date = new Date()
var year = date.getFullYear().toString()
var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString()
// var da = date.getDate() < 10 ? '0' + date.getDate().toString() : date.getDate().toString()
var da = new Date(date.getFullYear(), month, 0).getDate()
da < 10 ? '0' + da.toString() : da.toString()
var beg = year + '-' + month + '-01'
var end = year + '-' + month + '-' + da
this.queryParams.signDate = [beg, end] //将值设置给插件绑定的数据
}
},
watch: {
// 监听日期清理后数据为null进行处理否则会报错
'queryParams.signDate'(newVal) {
if (newVal == null) {
this.queryParams.signDate = ''
this.queryParams.startTime = ''
this.queryParams.endTime = ''
}
}
}
}
</script>注意：日期选择器清除完后这边有坑，选择完日期格式清除后重新加载，他会给绑定的signDate赋值为null，重新加载页面会报错，所以要设置上面的监听器，如果值为null时赋值为空字符串''，不然会报下面的错，设置了监听器可以正常运行
第二种方式：将开始日期和结束日期分为两个时间选择器
<el-form-item prop="startTime" style="margin-left: 20px">
<el-date-picker
v-model="queryParams.startTime"
type="date"
size="small"
placeholder="开始日期"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
style="width: 130px"
:picker-options="pickerOptionsStart"
>
</el-date-picker>
</el-form-item>
<el-form-item label="至" prop="endTime">
<el-date-picker
v-model="queryParams.endTime"
type="date"
size="small"
placeholder="结束日期"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
style="width: 130px"
:picker-options="pickerOptionsEnd"
>
</el-date-picker>
</el-form-item>定义绑定的参数及方法
<script>
export default {
data() {
return {
queryParams: {
startTime: '',
endTime: '',
},
// 开始时间不能大于结束时间
pickerOptionsStart: {
disabledDate: (time) => {
if (this.queryParams.endTime) {
return (
time.getTime() >= new Date(this.queryParams.endTime).getTime()
)
}
}
},
// 结束时间不能小于开始时间
pickerOptionsEnd: {
disabledDate: (time) => {
if (this.queryParams.startTime) {
return (
time.getTime() <= new Date(this.queryParams.startTime).getTime()
)
}
}
}
}
},
created() {
/** 重置按钮操作 */
resetForm() {
this.$refs['formName'].resetFields()
this.queryParams.startTime = ''
this.queryParams.endTime = ''
},
// 初始化默认时间
defaultDate() {
var date = new Date()
var year = date.getFullYear().toString()
var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString()
// var da = date.getDate() < 10 ? '0' + date.getDate().toString() : date.getDate().toString()
var da = new Date(date.getFullYear(), month, 0).getDate()
da < 10 ? '0' + da.toString() : da.toString()
var beg = year + '-' + month + '-01'
var end = year + '-' + month + '-' + da
this.queryParams.startTime = beg //将值设置给插件绑定的数据
this.queryParams.endTime = end
}
},
watch: {
// 监听日期清理后数据为null进行处理否则会报错
'queryParams.startTime'(newVal) {
if (newVal == null) {
this.queryParams.startTime = ''
}
},
'queryParams.endTime'(newVal) {
if (newVal == null) {
this.queryParams.endTime = ''
}
}
}
}
</script>总结
到此这篇关于el-date-picker设置日期默认值两种方法(当月月初至月末)的文章就介绍到这了,更多相关el-date-picker设置日期默认值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！