138 lines
3.4 KiB
Java
138 lines
3.4 KiB
Java
<template>
|
|
<div>
|
|
<!--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"
|
|
: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"
|
|
:getCalendarContainer="getCalendarContainer">
|
|
</a-date-picker>
|
|
<!--YYYY-MM-->
|
|
<a-month-picker
|
|
v-if="showType === 'month'"
|
|
:placeholder="placeholder"
|
|
:value="momVal"
|
|
:disabled="disabled || readOnly"
|
|
:format="dateFormat"
|
|
@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"
|
|
:getCalendarContainer="getCalendarContainer"
|
|
@openChange="openChangeOne"
|
|
@panelChange="panelChangeOne">
|
|
</a-date-picker>
|
|
</div>
|
|
</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),
|
|
}
|
|
},
|
|
watch: {
|
|
value (val) {
|
|
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>
|