組件：
<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')
參考鏈接：