161 lines
4.0 KiB
Java
161 lines
4.0 KiB
Java
<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"
|
|
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"
|
|
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"
|
|
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"
|
|
@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 () {
|
|
let dateStr = this.value;
|
|
return {
|
|
yearShowOne:false, //控制年份模态框的显示与否
|
|
year:'', // mode==“year” 专用
|
|
momVal:!dateStr?null:moment(dateStr,this.dateFormat)
|
|
}
|
|
},
|
|
computed: {
|
|
//透传给下级组件的事件，需要排除本组件使用的change事件
|
|
childListeners() {
|
|
const vm = this;
|
|
let result = Object.assign({},
|
|
this.$listeners,
|
|
)
|
|
delete result.change;
|
|
return result;
|
|
}
|
|
},
|
|
watch: {
|
|
value (val) {
|
|
let fm = this.dateFormat
|
|
moment.prototype.toJSON = function(){
|
|
return moment(this).format(fm)
|
|
}
|
|
if(!val){
|
|
this.momVal = null
|
|
}else{
|
|
this.momVal = moment(val,this.dateFormat)
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
moment,
|
|
handleDateChange(mom,dateStr){
|
|
this.$emit('change', dateStr);
|
|
},
|
|
handleMonthChange(mom,dateStr){
|
|
this.$emit('change',dateStr)
|
|
},
|
|
/**
|
|
* 弹出日历和关闭日历的回调
|
|
* status：打开或关闭的状态
|
|
* */
|
|
openChangeOne(status){
|
|
this.yearShowOne = status
|
|
},
|
|
// 得到年份选择器的值
|
|
panelChangeOne(value){
|
|
this.yearShowOne = false
|
|
let year = moment(value,this.dateFormat).year().toString() // 处理成字符串
|
|
this.year = value //组件显示的
|
|
this.$emit('change',year)
|
|
}
|
|
},
|
|
//2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型
|
|
model: {
|
|
prop: 'value',
|
|
event: 'change'
|
|
}
|
|
}
|
|
</script>
|