184 lines
4.3 KiB
Vue
184 lines
4.3 KiB
Vue
<template>
|
|
<span>
|
|
<!--YYYY-MM-DD HH:mm:ss-->
|
|
<a-date-picker
|
|
v-if="showType === 'time'"
|
|
dropdownClassName="j-date-picker"
|
|
:disabled="disabled || readOnly"
|
|
:placeholder="placeholder"
|
|
@change="handleDateChange"
|
|
:value="momVal"
|
|
:showTime="true"
|
|
:format="dateFormat"
|
|
style="width: 100%"
|
|
v-bind="$attrs"
|
|
v-on="childListeners"
|
|
:getCalendarContainer="getCalendarContainer">
|
|
</a-date-picker>
|
|
<!--YYYY-MM-DD-->
|
|
<a-date-picker
|
|
v-if="showType === 'day'"
|
|
dropdownClassName="j-date-picker"
|
|
:disabled="disabled || readOnly"
|
|
:placeholder="placeholder"
|
|
@change="handleDateChange"
|
|
:value="momVal"
|
|
:showTime="false"
|
|
:format="dateFormat"
|
|
style="width: 100%"
|
|
v-bind="$attrs"
|
|
v-on="childListeners"
|
|
:getCalendarContainer="getCalendarContainer">
|
|
</a-date-picker>
|
|
<!--YYYY-MM-->
|
|
<a-month-picker
|
|
v-if="showType === 'month'"
|
|
:placeholder="placeholder"
|
|
:value="momVal"
|
|
:disabled="disabled || readOnly"
|
|
:format="dateFormat"
|
|
style="width: 100%"
|
|
v-bind="$attrs"
|
|
v-on="childListeners"
|
|
@change="handleMonthChange">
|
|
</a-month-picker>
|
|
<!--YYYY-->
|
|
<a-date-picker
|
|
v-if="showType === 'year'"
|
|
:placeholder="placeholder"
|
|
mode="year"
|
|
:format="dateFormat"
|
|
:value="year"
|
|
:disabled="disabled || readOnly"
|
|
:open="yearShowOne"
|
|
v-bind="$attrs"
|
|
v-on="childListeners"
|
|
:getCalendarContainer="getCalendarContainer"
|
|
style="width: 100%"
|
|
@change="handleYearChange"
|
|
@openChange="openChangeOne"
|
|
@panelChange="panelChangeOne">
|
|
</a-date-picker>
|
|
</span>
|
|
</template>
|
|
<script>
|
|
import moment from 'moment'
|
|
|
|
export default {
|
|
name: 'JDate',
|
|
props: {
|
|
placeholder: {
|
|
type: String,
|
|
default: '请选择',
|
|
required: false
|
|
},
|
|
value: {
|
|
type: String,
|
|
required: false
|
|
},
|
|
dateFormat: {
|
|
type: String,
|
|
default: 'YYYY-MM-DD',
|
|
required: false
|
|
},
|
|
readOnly: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
},
|
|
// 控制选择时分秒
|
|
showType: {
|
|
type: String,
|
|
required: false,
|
|
default: 'time'
|
|
},
|
|
getCalendarContainer: {
|
|
type: Function,
|
|
default: (node) => node.parentNode
|
|
}
|
|
},
|
|
data () {
|
|
const dateStr = this.value
|
|
return {
|
|
yearShowOne: false, // 控制年份模态框的显示与否
|
|
year: '', // mode==“year” 专用
|
|
momVal: !dateStr ? null : moment(dateStr, this.dateFormat)
|
|
}
|
|
},
|
|
computed: {
|
|
// 透传给下级组件的事件，需要排除本组件使用的change事件
|
|
childListeners () {
|
|
const result = Object.assign({},
|
|
this.$listeners
|
|
)
|
|
delete result.change
|
|
return result
|
|
}
|
|
},
|
|
watch: {
|
|
value (val) {
|
|
console.log(val)
|
|
const fm = this.dateFormat
|
|
moment.prototype.toJSON = function () {
|
|
return moment(this).format(fm)
|
|
}
|
|
if (!val) {
|
|
if (this.showType === 'year') {
|
|
this.year = null
|
|
} else {
|
|
this.momVal = null
|
|
}
|
|
} else {
|
|
if (this.showType === 'year') {
|
|
this.year = val
|
|
} else {
|
|
this.momVal = moment(val, this.dateFormat)
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
moment,
|
|
handleDateChange (mom, dateStr) {
|
|
this.$emit('change', dateStr)
|
|
},
|
|
handleMonthChange (mom, dateStr) {
|
|
this.$emit('change', dateStr)
|
|
},
|
|
handleYearChange (mom, dataStr) {
|
|
this.$emit('change', dataStr)
|
|
},
|
|
/**
|
|
* 弹出日历和关闭日历的回调
|
|
* status：打开或关闭的状态
|
|
* */
|
|
openChangeOne (status) {
|
|
this.yearShowOne = status
|
|
},
|
|
// 得到年份选择器的值
|
|
panelChangeOne (value) {
|
|
this.yearShowOne = false
|
|
const year = moment(value, this.dateFormat).year().toString() // 处理成字符串
|
|
this.year = value // 组件显示的
|
|
this.$emit('change', year)
|
|
}
|
|
},
|
|
// 2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型
|
|
model: {
|
|
prop: 'value',
|
|
event: 'change'
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.ant-calendar-picker {
|
|
/*min-width: 195px;*/
|
|
}
|
|
</style>
|