ant-design-vue 日期区间选择设置默认时间

组件:

<template>
  <a-range-picker
    :showTime="showTime"
    @change="onChange"
    @ok="onOk"
  ></a-range-picker>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      showTime: {
        format: "HH:mm:ss",
        defaultValue: [
          moment("00:00:00", "HH:mm:ss"),
          moment("23:59:59", "HH:mm:ss"),
        ],
      },
    };
  },
  methods: {
    onChange(value, dateString) {
      console.log("Selected Time: ", value);
      console.log("Formatted Selected Time: ", dateString);
    },
    onOk(value) {
      console.log("onOk: ", value);
      console.log(value.map((item) => item.format("YYYY-MM-DD HH:mm:ss")));
    },
  },
};
</script>

<style scoped>
</style>

国际化:

<template>
  <div id="app">
    <a-config-provider :locale="zhCN">
      <router-view/>
    </a-config-provider>
  </div>
</template>

<script>
import zhCN from 'ant-design-vue/es/locale-provider/zh_CN.js'
export default {
  data() {
    return {
      zhCN
    }
  },
}

</script>

main.js引入:

import Vue from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue'
import router from './router'
import store from './store'
import 'ant-design-vue/dist/antd.css'
import './font/iconfont.css'
import './index.css'

Vue.use(Antd)
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

参考链接:

https://www.antdv.com/components/date-picker-cn/

http://momentjs.cn/

原文地址:https://www.cnblogs.com/xutongbao/p/14876287.html