<el-date-picker
v-model="form.startTime"
:clearable="false"
type="date"
placeholder="请选择"
:picker-options="endPickerOptions0"
size="medium"
value-format="yyyy-MM-dd"
>
</el-date-picker>
<span class="" style="margin: 0 2px 0px 8px"> -</span>
<el-date-picker
ref="datePicker"
v-model="form.endTime"
:clearable="false"
prefix-icon="el-icon-date"
:placeholder="placeholder"
type="date"
style="margin-left:10px"
:class="[isShow === true ?'active':'']"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions"
@change="changeTime"
>
</el-date-picker>
<div v-if="isShow" class="zhijin">至今</div>
样式:需要把至今定位到选择框
.goodsManage {
.zhijin{
position: absolute;
top: 0;
left: 55%;
}
.active{
.el-input__inner{
color: #fff;
}
}
}
在data里定义shortcuts
isShow: false,// 选择至今和时间有冲突,通过隐藏时间来显示至今
getTimes: '',
placeholder: '请选择',
pickerOptions: {
shortcuts: [
{
text: '至今',
onClick: (picker) => {
picker.$emit('pick', new Date())
}
}
]
},
选择至今按钮时的操作,这样可以回显至今
// 选择至今的操作
pick(picker) {
this.isShow = true
this.getTimes = this.getNowFormatDate()
this.placeholder = ''
this.$refs.datePicker.handleClose()// 关闭时间弹窗
},
在选择开始时间和结束时间时对此进行限制,让结束时间不能小于开始时间,需要在data里定义
pickerOptions: {
shortcuts: [
{
text: '至今',
onClick: (picker) => {
picker.$emit('pick', new Date())
}
}
],
disabledDate: time => {
const beginDateVal = this.form.startTime
if (beginDateVal) {
return time.getTime() < new Date(beginDateVal).getTime()
}
}
},
// 开始时间
endPickerOptions0: {
disabledDate: time => {
const endDateVal = this.form.endTime
if (endDateVal) {
return time.getTime() > new Date(endDateVal).getTime()
}
}
}
转化new date(),转换成年-月-日的形式
getNowFormatDate() {
const date = new Date()
const seperator1 = '-'
const year = date.getFullYear()
let month = date.getMonth() + 1
let strDate = date.getDate()
if (month >= 1 && month <= 9) {
month = '0' + month
}
if (strDate >= 0 && strDate <= 9) {
strDate = '0' + strDate
}
const currentdate = year + seperator1 + month + seperator1 + strDate
return currentdate
},