按需引入vue-ant-design组件DatePicker，并修改样式，格式化时间为utc,2022/6/24am

最新推荐文章于 2023-12-20 11:27:02 发布

xumengxia—xu

最新推荐文章于 2023-12-20 11:27:02 发布

阅读量1.8k

点赞数 1

分类专栏：工作2022年5月，记录生活的每一天文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_56514785/article/details/125438614

版权

工作2022年5月，记录生活的每一天专栏收录该内容

37 篇文章 1 订阅

订阅专栏

安装指定版本的  npm i ant-design-vue@2.2.8

在main.js中引入
import { createApp } from 'vue'

// 引用所有样式
import { DatePicker, Input, Select } from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
const app = createApp(App)
app
  .use(store)
  .use(router)
  .use(ElementPlus)
  .use(DatePicker)
  .use(Input)
  .use(Select)
  .mount('#app')

<template>
  <div class="microstores">
    <div class="container">
    <!-- 搜索模块 -->
    <div class="search">
    <el-row :gutter="20" class="row-bg" justify="space-between">
    <el-col :span="8">
        <span class="labletitle">(UTC) Start Time :</span>
        <!-- :disabled-date="disabledStartDate" -->
        <a-date-picker
          style="width:100%;height:40px"
          v-model:value="startValue"
          show-time
          :format="dateFormat"
          placeholder="Start"
        />

    </el-col>
    <el-col :span="8">
       <span class="labletitle">(UTC) End Time :</span>
        <a-date-picker
          style="width:100%;height:40px"
          v-model:value="endValue"
          show-time
          :format="dateFormat"
          placeholder="End"
        />
    </el-col>
  </el-row>
  </div>
    
    </div>

  </div>

</template>

<script lang="ts" >
import { defineComponent, onMounted, toRefs, reactive, ref, computed } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import moment from 'moment'
export default defineComponent({
  name: 'Microstores',
  components: {

  },
  setup () {
    onMounted(() => {
      data.submitchange()
    })
    const Store = useStore()
    const startValue = ref()
    const endValue = ref()
    const dateFormat = (val:any) => {
      return moment(val).utc().format('YYYY-MM-DD HH:mm:ss')
    }

    const data = reactive({
      StoreName: ref(''),
      StoreNo: ref(''),
      submitchange () {
        if (startValue.value) {
          startValue.value = dateFormat(startValue.value)
        }
        if (endValue.value) {
          endValue.value = dateFormat(endValue.value)
        }
        const searchresult = {
          startTime: startValue.value || '',
          endTime: endValue.value || '',
          storeNoStr: data.StoreNo,
          storeNameStr: data.StoreName,
          pageNum: data.currentPage,
          pageSize: data.pageSizes

        }
        Store.commit('baibiaochangesearchdata', searchresult)
        data.getdatas(searchresult)
      },


    })
    return {
      ...toRefs(data),
      startValue,
      endValue,
      dateFormat,


    }
  }

})
</script>
<style  lang="less">
// 日期选择器
.ant-calendar-picker-input.ant-input{
  height: 40px;
}
.ant-calendar .ant-calendar-ok-btn{
  background: #6a49ac;
  border-color: #6a49ac;

}
.ant-calendar-today .ant-calendar-date {
  background: #6a49ac;
  border-color: #6a49ac;
  color: #fff;

}
.ant-calendar-selected-day .ant-calendar-date {
   background: #f0edf7;
   color: #202020;
}
.ant-calendar-time .ant-calendar-footer .ant-calendar-time-picker-btn-disabled{
   color: #202020;
}
.ant-calendar-today-btn {
  color: #202020;
}
.ant-input:hover,
.ant-calendar-picker:hover .ant-calendar-picker-input:not(.ant-input-disabled){
  border-color: #6a49ac;
}
.ant-input:focus,
.ant-calendar-picker:focus .ant-calendar-picker-input:not(.ant-input-disabled) {
 border-color: #6a49ac;
 box-shadow: none;
}
</style>