vue3使用ant日期选择器禁用小时分钟秒报错 (找不到dayjs )
TypeError: _ctx.dayjs is not a function
报错代码
<a-date-picker
v-model:value="selectTime"
format="YYYY-MM-DD HH:mm:ss"
placeholder="选择时间"
:disabled-time="disabledDateTime"
:show-time="{ 'defaultValue': dayjs('00:00:00', 'HH:mm:ss') }"
/>
setup() {
const range = (start, end) => {
const result = [];
for (let i = start; i < end; i++) {
result.push(i);
}
return result;
};
//禁用范围控制
const disabledDateTime = () => {
return {
// disabledHours: () => range(0, 24).splice(5, 20),
disabledMinutes: () => range(0, 60),
disabledSeconds: () => range(0, 60)
};
};
let state = reactive({
selectTime: '', //选择时间
})
return {
...toRefs(state),
disabledDateTime,
}
}
即便当前vue文件引入 import dayjs from 'dayjs'
依然报错
解决方法:
将dayjs挂载到原型
main.js
import { createApp } from 'vue'
import Antd from 'ant-design-vue'
import App from './App'
import dayjs from 'dayjs'
import router from './router'
import store from './store'
import 'ant-design-vue/dist/antd.css'
import Icon from '@/components/base/Icon'
import * as mcharts from 'echarts'
import "dayjs/locale/zh-cn"
const app = createApp(App)
// 全局挂载组件/库
app.component('Icon', Icon)
app.config.globalProperties.$nowTime = formatterTime;
// vue3 给原型上挂载属性
app.config.globalProperties.$mcharts = mcharts
app.config.globalProperties.$dayjs = dayjs
app.use(store).use(router).use(Antd).use(load).mount('#app')
模板改为:
<ma-date-picker
v-model:value="selectTime"
format="YYYY-MM-DD HH:mm:ss"
placeholder="选择时间"
:disabled-time="disabledDateTime"
:show-time="{ 'defaultValue': $dayjs('00:00:00', 'HH:mm:ss') }"
/>