calendar.vue

<template>
		<u-calendar 
		:show="showPop" 
		@confirm="onConfirm"
		@close="showPop=false"
		:defaultDate="defaultDate"
		:formatter='formatter'
		:customList='customList'
		ref="calendar2"
		rowHeight='112'
		round='20'
		closeOnClickOverlay='true'
		></u-calendar>
</template>

<script>
export default {
  props: ['dateList'],
  watch: {
    dateList:{
      handler(newValue, oldValue){
        if(newValue&&newValue.length>0){
          this.customList=newValue.map(item=>{
            return item.startTime.substr(0,10)
          })
          this.defaultDate=newValue[0].startTime.substr(0,10)
          //由于传入了customList，最大日期和最小日期可以取消
          // this.maxDate=newValue[newValue.length-1].startTime.substr(0,10)
          // //默认和最小日期都为第一天
          // this.minDate=newValue[0].startTime.substr(0,10)
        }
      },
      deep:true,
      immediate:true
    }
  },
  data() {
    return {
      showPop: false, //控制日历显示隐藏
      defaultDate:'', //默认日期
      maxDate:'',//最大日期
      minDate:'',//最小日期
      customList:[],//转化之后的日期列表
    }
  },
  mounted() {
    this.$refs.calendar2.setFormatter(this.formatter)
  },
  methods: {
    //---日期确认事件
    onConfirm(date){
      this.showPop = false
      this.$emit('dateConfig', date[0])
    },
    //---时间格式转换
    formatter(day) { 
      let year = day.date.getFullYear()
      let month = day.date.getMonth() + 1
      if (month < 10) {
        month = '0' + month
      }
      let days = day.date.getDate()
      if (days < 10) {
        days = '0' + days
      }
      let dates = year + '-' + month + '-' + days
      //真机调试手极端报错，暂时注释
      // this.dateList.forEach((item, index) => {
      // 	if (item.startTime.substr(0, 10) == dates) {
      // 		day.bottomInfo = '¥' + item.sellingPrice
      // 		day.dot = true
      // 	}
      // })
      return day
			
    }
  }
}
</script>

<style scoped="scoped">

</style>