155 lines
4.3 KiB
Vue
155 lines
4.3 KiB
Vue
<template>
|
|
<a-date-picker
|
|
:id="fieldName"
|
|
:show-time="false"
|
|
:open="open"
|
|
:ref="fieldName"
|
|
:dropdownClassName="'j-multiple-date-picker ' + fieldName + '-drop'"
|
|
@openChange="handleOpenChange"
|
|
:getCalendarContainer="(trigger) => trigger.parentNode"
|
|
style="width: 100%"
|
|
v-bind="$attrs"
|
|
>
|
|
<template slot="dateRender" slot-scope="current">
|
|
<div class="ant-calendar-date" @click.stop="clickCalendarDate(current)" :class="{'blue': getCurrentStyle(current)}">
|
|
{{current.date()}}
|
|
</div>
|
|
</template>
|
|
<!-- <template slot="renderExtraFooter" slot-scope="">-->
|
|
<!-- <a class="ant-calendar-ok-btn" @click="handleOk">确定</a>-->
|
|
<!-- </template>-->
|
|
</a-date-picker>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'JMultipleDatePicker',
|
|
props: {
|
|
value: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
fieldName: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
watch: {
|
|
value (val) {
|
|
if (!val) {
|
|
this.checkedValue = []
|
|
document.getElementById(this.fieldName).children[0].children[0].value = ''
|
|
this.$emit('change', '')
|
|
} else {
|
|
this.checkedValue = val.split(',')
|
|
document.getElementById(this.fieldName).children[0].children[0].value = val
|
|
}
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
open: false,
|
|
checkedValue: []
|
|
}
|
|
},
|
|
methods: {
|
|
handleOpenChange (open) {
|
|
console.log(open)
|
|
if (open) {
|
|
this.open = open
|
|
setTimeout(() => {
|
|
document.getElementsByClassName(this.fieldName + '-drop')[0].children[0].children[0].children[0].children[0].children[0].value = this.checkedValue.join(',')
|
|
}, 100)
|
|
} else {
|
|
this.open = open
|
|
this.$nextTick(() => {
|
|
document.getElementById(this.fieldName).children[0].children[0].value = this.checkedValue.join(',')
|
|
})
|
|
}
|
|
},
|
|
getCurrentStyle (current) {
|
|
const currentStr = current.format('YYYY-MM-DD')
|
|
if (this.checkedValue.includes(currentStr)) {
|
|
return true
|
|
}
|
|
},
|
|
// 点击日期，加日期或者减日期
|
|
clickCalendarDate (current) {
|
|
const currentStr = current.format('YYYY-MM-DD')
|
|
if (!this.checkedValue.includes(currentStr)) {
|
|
console.log('加日期')
|
|
const checkedValue = this.checkedValue
|
|
checkedValue.push(currentStr)
|
|
// 对日期进行排序
|
|
this.checkedValue = checkedValue.sort((date1, date2) => {
|
|
return new Date(date1) - new Date(date2)
|
|
})
|
|
} else {
|
|
console.log('减日期')
|
|
this.checkedValue = this.checkedValue.filter(item => item !== currentStr)
|
|
}
|
|
this.$nextTick(() => {
|
|
document.getElementsByClassName(this.fieldName + '-drop')[0].children[0].children[0].children[0].children[0].children[0].value = this.checkedValue.join(',')
|
|
})
|
|
this.$emit('change', this.checkedValue.join(','))
|
|
}
|
|
// 点击日期弹出框中的确定按钮
|
|
// handleOk () {
|
|
// this.open = false
|
|
// this.$nextTick(() => {
|
|
// // 改变外侧日期显示框的数据
|
|
// document.getElementById(this.fieldName).children[0].children[0].value = this.checkedValue.join(',')
|
|
// // document.getElementsByClassName(this.fieldName)[0].children[0].children[0].value = this.checkedValue.join(',')
|
|
// })
|
|
// this.$emit('change', this.checkedValue.join(','))
|
|
// }
|
|
},
|
|
model: {
|
|
prop: 'value',
|
|
event: 'change'
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
|
|
// 去掉日期面板中原本选中的样式
|
|
.j-multiple-date-picker {
|
|
.ant-calendar-today {
|
|
.ant-calendar-date {
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
}
|
|
.ant-calendar-selected-day {
|
|
.ant-calendar-date{
|
|
background: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 设置日期面板中选中日期的样式
|
|
.blue {
|
|
background: #ffd5d3 !important;
|
|
}
|
|
|
|
// 设置输入框中的文字显示
|
|
/deep/ .ant-calendar-picker-input {
|
|
padding-right: 30px;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
// 设置弹出层footer的布局
|
|
:global(.ant-calendar-footer-btn) {
|
|
display: flex !important;
|
|
justify-content: space-between !important;
|
|
flex-direction: row-reverse !important;
|
|
align-items: center !important;
|
|
}
|
|
// 删除弹出层的今天按钮
|
|
:global(.ant-calendar-today-btn) {
|
|
display: none !important;
|
|
}
|
|
</style>
|