Ant Design a-time-picker 时间回显问题 回显为Invalid date(使用moment来处理)

 <a-form-model-item label="开始时间" prop="beginTime">
            <a-time-picker v-model="beginTime" format="HH:mm" @change="beginTimeChange" />
          </a-form-model-item>
import moment from 'moment';
methods: {
    moment,
}
this.beginTime = moment(this.dataForm.beginTime, 'HH:mm')
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,针对您的问题,我可以提供以下的解决方案: 1. 首先,在 Vue3 工程中安装 ant-design-vue: ```bash npm install ant-design-vue@next ``` 2. 在 main.js 中引入 ant-design-vue 的样式和脚本: ```js import { createApp } from 'vue' import App from './App.vue' import Antd from 'ant-design-vue' import 'ant-design-vue/dist/antd.css' createApp(App).use(Antd).mount('#app') ``` 3. 在组件中使用 a-date-picker 组件,并将选中的日期保存在一个变量中: ```html <template> <a-date-picker v-model:value="selectedDate" style="width: 100%;" /> </template> <script> export default { data() { return { selectedDate: null, // 初始化选中的日期为 null }; }, mounted() { // 获取要回显的日期,假设为 "2022-01-01" const date = new Date("2022-01-01"); // 将选中的日期设置为获取的日期 this.selectedDate = date; }, }; </script> ``` 4. 如果您需要在页面中回显已经选中的日期,可以在组件初始化时将选中的日期传入组件: ```html <template> <a-date-picker v-model:value="selectedDate" style="width: 100%;" /> </template> <script> export default { data() { return { selectedDate: null, // 初始化选中的日期为 null }; }, mounted() { // 获取要回显的日期,假设为 "2022-01-01" const date = new Date("2022-01-01"); // 将选中的日期设置为获取的日期 this.selectedDate = date; }, }; </script> ``` 希望以上解决方案能够帮助到您,如有任何疑问,请随时追问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值