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')
参考链接:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步