封装自定义elementplus 的el-date-picker，调用，父子传值，2022/6/4am

 首先安装moment，用于格式化时间

npm install moment --save

<template>
  <div class="about">
   <el-date-picker
        style="width:100%;height:40px"
        v-model="startValues"
        type="datetime"
        format="YYYY/MM/DD hh:mm:ss"
        :placeholder="placeholderCon"
        @change="childChange"
      >
       <template #default="cell">
        <div class="cell" :class="{ current: cell.isCurrent }">
          <span class="text">{{ cell.text }}</span>
        </div>
      </template>
      </el-date-picker>
  </div>
</template>

<script lang="ts">
import { defineComponent, toRefs, reactive, computed } from 'vue'
import moment from 'moment'
export default defineComponent({
  name: 'dataPicker',
  props: { placeholderCon: String },
  setup (props, ctx) {
    const data = reactive({
      startValues: '',
      childChange () {
        console.log('startValue', data.startValues)
        data.startValues = moment(data.startValues).utc().format('YYYY-MM-DD HH:mm:ss')
        //  ctx.emit("todata", { msg: "ylg" });
        ctx.emit('sendMsg', data.startValues)
      },
      placeholderCon: computed(() => {
        return props.placeholderCon
      })
    })
    return {
      ...toRefs(data)

    }
  }

})
</script>
<style lang="less" scoped>
::v-deep(.el-date-table td.available:hover){
   color:#6a49ac;
}

.cell {
  height: 30px;
  padding: 3px 0;
  box-sizing: border-box;
}
.cell .text {
  width: 24px;
  height: 24px;
  display: block;
  margin: 0 auto;
  line-height: 24px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}
.cell.current .text {
  background: #6a49ac;
  color: #fff;
}
.cell .holiday {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--el-color-danger);
  border-radius: 50%;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
}
</style>

<template>
  <div class="search">
    <el-row :gutter="20" class="row-bg" justify="space-between">
    <el-col :span="8">
      <span class="labletitle">Start Time :{{ startValue}}</span>
      <dataPicker :placeholderCon="placeholderStart"  @sendMsg="sendMsgsStartValue"></dataPicker>

    </el-col>
    <el-col :span="8">
       <span class="labletitle">End Time :</span>
       <dataPicker :placeholderCon="placeholderEnd"  @sendMsg="sendMsgsEndValue"></dataPicker>
    </el-col>
    <el-col :span="8">
      <span class="labletitle">Store Name :</span>
      <el-input style="width:100%;height:40px" v-model="StoreName" placeholder="Store Name" clearable />
    </el-col>

  </el-row>
  <el-row :gutter="20">
    <el-col :span="8" style="margin-top:20px">
      <span class="labletitle">Store No :</span>
      <el-input style="width:100%;height:40px" v-model="StoreNo" placeholder="Store No" clearable />
    </el-col>
    <el-col :span="8"  style="margin-top:20px;">
       <div style="width: 185px;">
         <el-button class="btn" size="large" type="primary" color="#6a49ac" @click="submitchange">Search</el-button>
         <el-button class="btn" size="large" color="#6a49ac" plain @click="handleReset" >Reset</el-button>
       </div>
    </el-col>
  </el-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, toRefs, reactive, ref } from 'vue'
// import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import 'element-plus/theme-chalk/display.css'
// import getdatas from '@/hooks/Microstores/getdatas' // 表格数据
import { getdata } from '@/api/Microstores/microstoresapi'
import dataPicker from '@/components/dataPicker.vue'
export default defineComponent({
  name: 'Search',
  components: { dataPicker },
  setup () {
    onMounted(() => {
      data.submitchange()
    })
    const Store = useStore()
    // const UseGetdatas = getdatas()
    const sendMsgsStartValue = (val:any) => {
      startValue.value = val
    }
    const sendMsgsEndValue = (val:any) => {
      endValue.value = val
    }
    const data = reactive({
      StoreName: ref(''),
      StoreNo: ref(''),
      placeholderStart: 'Start',
      placeholderEnd: 'End',
      submitchange: () => {
        const searchresult = {
          startTime: startValue.value || '',
          endTime: endValue.value || '',
          storeNoStr: data.StoreNo,
          storeNameStr: data.StoreName,
          pageNum: Store.state.Microstore.currentPage,
          pageSize: Store.state.Microstore.pageSize

        }
        Store.commit('baibiaochangesearchdata', searchresult)
        console.log('kk')

        data.getdatas(searchresult)
      },
      getdatas (searchresult: any) {
        Store.commit('changeLoadingFlag', true)
        getdata(searchresult).then((res: any) => {
          console.log(typeof (res.data.data.total), 'res')
          const tableDate = res.data.data.records
          Store.commit('baibiaochangedatalist', tableDate)
          Store.commit('baibiaochangetotal', res.data.data.total)
          Store.commit('changeLoadingFlag', false)
        })
      // console.log(reault)
      },
      handleReset () {
        // resetObj(this.listQuery)
        startValue.value = ''
        endValue.value = ''
        data.StoreName = ''
        data.StoreNo = ''
      }

    })
    const startValue = ref()
    const endValue = ref()
    return {
      ...toRefs(data), startValue, endValue, sendMsgsStartValue, sendMsgsEndValue
    }
  }
})
</script>
<style lang="less" scoped>

.search {
  .labletitle {
    color: #4a5463;
    font-size: 18px;
    margin-bottom: 2px;
  }
  .btn {
     margin-top: 30px;
     font-size: 18px;
     font-weight: 500;

  }
  ::v-deep(.el-input__wrapper) {
    box-shadow: 0 0 0 1px #98a3b3 inset;
  }
  ::v-deep(.el-input__wrapper .is-focus) {
    box-shadow: 0 0 0 1px #6a49ac inset;
  }
  ::v-deep(.el-input__wrapper:hover) {
    box-shadow: 0 0 0 1px #6a49ac inset;
  }
}
</style>