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

最新推荐文章于 2024-05-24 15:05:38 发布

徐同保

最新推荐文章于 2024-05-24 15:05:38 发布

阅读量1.9k

点赞数 1

分类专栏： web前端文章标签： vue.js

本文链接：https://blog.csdn.net/xutongbao/article/details/115859829

版权

web前端专栏收录该内容

735 篇文章 16 订阅

订阅专栏

组件：

<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')

参考链接：

Ant Design Vue

Moment.js 中文网