日期组件完善

This commit is contained in:
yaoyanan
2021-03-23 17:29:44 +08:00
parent 102e6e3705
commit 19c784051e
+15 -16
View File
@@ -10,8 +10,7 @@
:value="momVal" :value="momVal"
:showTime="true" :showTime="true"
:format="dateFormat" :format="dateFormat"
:getCalendarContainer="getCalendarContainer" :getCalendarContainer="getCalendarContainer"></a-date-picker>
/>
<!--YYYY-MM-DD--> <!--YYYY-MM-DD-->
<a-date-picker <a-date-picker
v-if="showType === 'day'" v-if="showType === 'day'"
@@ -22,8 +21,7 @@
:value="momVal" :value="momVal"
:showTime="false" :showTime="false"
:format="dateFormat" :format="dateFormat"
:getCalendarContainer="getCalendarContainer" :getCalendarContainer="getCalendarContainer"></a-date-picker>
/>
<!--YYYY-MM--> <!--YYYY-MM-->
<a-month-picker <a-month-picker
v-if="showType === 'month'" v-if="showType === 'month'"
@@ -31,7 +29,7 @@
:value="momVal" :value="momVal"
:disabled="disabled || readOnly" :disabled="disabled || readOnly"
:format="dateFormat" :format="dateFormat"
@change="handleMonthChange"/> @change="handleMonthChange"></a-month-picker>
<!--YYYY--> <!--YYYY-->
<a-date-picker <a-date-picker
v-if="showType === 'year'" v-if="showType === 'year'"
@@ -39,9 +37,12 @@
mode="year" mode="year"
:format="dateFormat" :format="dateFormat"
:value="year" :value="year"
:open='yearShowOne' @disabledDate="disabledDate"
:disabled="disabled || readOnly"
:open="yearShowOne"
:getCalendarContainer="getCalendarContainer"
@openChange="openChangeOne" @openChange="openChangeOne"
@panelChange="panelChangeOne"/> @panelChange="panelChangeOne"></a-date-picker>
</div> </div>
</template> </template>
<script> <script>
@@ -96,12 +97,9 @@
yearShowOne:false, //控制年份模态框的显示与否 yearShowOne:false, //控制年份模态框的显示与否
year:'', year:'',
decorator:"", decorator:"",
momVal:!dateStr?null:moment(dateStr,this.dateFormat) momVal:!dateStr?null:moment(dateStr,this.dateFormat),
} }
}, },
mounted(){
console.log(this.showTime)
},
watch: { watch: {
value (val) { value (val) {
if(!val){ if(!val){
@@ -112,6 +110,9 @@
} }
}, },
methods: { methods: {
disabledDate(current){
return new Date(current._d).setFullYear((new Date(current._d).getFullYear())) < new Date(moment()._d).setFullYear((new Date(moment()._d).getFullYear() - 1))
},
moment, moment,
handleDateChange(mom,dateStr){ handleDateChange(mom,dateStr){
this.$emit('change', dateStr); this.$emit('change', dateStr);
@@ -122,17 +123,15 @@
// 弹出日历和关闭日历的回调 // 弹出日历和关闭日历的回调
openChangeOne(status){ openChangeOne(status){
//status是打开或关闭的状态 //status是打开或关闭的状态
if(status){ this.yearShowOne = status
this.yearShowOne = true
}
}, },
// 得到年份选择器的值 // 得到年份选择器的值
panelChangeOne(value){ panelChangeOne(value){
this.yearShowOne = false
let year = moment(value,this.dateFormat).year().toString() // 处理成字符串 let year = moment(value,this.dateFormat).year().toString() // 处理成字符串
this.year = value //组件显示的 this.year = value //组件显示的
this.$emit('change',year) this.$emit('change',year)
this.yearShowOne = false }
},
}, },
//2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼 //2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
model: { model: {