PrimeVue Calendar问题：后端日期输入框显示但日历未选中，能否用defaultTime？

你的问题核心在于v-model绑定的是字符串类型日期，而非PrimeVue Calendar组件期望的Date对象。虽然输入框能通过组件的自动解析逻辑显示日期，但日历面板无法识别字符串格式的日期值，因此不会选中对应的日期时间。

关于defaultTime属性 #

defaultTime的作用是当用户仅选择日期、未指定时间时，自动填充预设的时间值（比如defaultTime="09:00"），它无法解决字符串日期无法被日历面板识别选中的问题，所以靠这个属性不能解决当前问题。

正确解决方法 #

需要将后端返回的字符串日期转换为Date对象后，再绑定到v-model上：

1. 手动解析日期字符串（适配DD.MM.YYYY HH:mm格式）：
   在获取后端数据后，对field.value[0]做转换处理：

   const dateStr = field.value[0]; // 示例值：15.10.2024 11:48
   const [day, month, year, hour, minute] = dateStr.split(/[. :]/);
   // 注意：JavaScript的Date对象月份从0开始，需减1
   field.value[0] = new Date(year, month - 1, day, hour, minute);
   

2. 使用PrimeVue内置工具解析（可选）：
   若项目引入了PrimeVue的DateUtils，可以直接用它来解析指定格式的日期字符串：

   import { DateUtils } from 'primevue/utils';
   field.value[0] = DateUtils.parseDate(dateStr, 'dd.MM.yyyy HH:mm');
   

完成转换后，Calendar组件的日历面板就能正确识别并选中对应的日期时间了。

内容的提问来源于stack exchange，提问作者Александр