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时赋值为空字符串''，不然会报下面的错，设置了监听器可以正常运行
第二种方式：将开始日期和结束日期分为两个时间选择器
文章来源：https://www.toymoban.com/news/detail-517267.html
<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>定义绑定的参数及方法文章来源地址https://www.toymoban.com/news/detail-517267.html
<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设置日期默认值（当月月初至月末）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
