Jetstream应用中vue3-date-time-picker的@click事件无法触发如何解决

开发者阿泽

2026-9-25

问题解决方案

核心问题原因

事件绑定不符合组件设计

vue3-date-time-picker 内部对日期单元格的点击事件做了封装处理，原生click事件无法直接被外部监听到，你直接绑定的@click只会触发组件根容器的点击，选择日期的动作不会触发该事件，应该使用组件专门提供的日期更新事件来监听选择动作。

额外变量拼写错误

setup函数中定义的最大日期变量名为mxdate，返回时写为maxdate，变量不匹配会导致最大日期限制失效。

修复后的代码

模板部分

<Datepicker 
  :disabledDates="disabledDates"  
  @update:modelValue="doSomething" 
  v-model="date" 
  inline 
  autoApply 
  :minDate="new Date()" 
  :maxDate="maxdate" 
  :enableTimePicker="false"
></Datepicker>

逻辑部分

setup() {
  const date = ref();
  const today = new Date();
  // 修正变量名匹配返回值
  const maxdate = new Date(today.getFullYear(), today.getMonth() + 2, today.getDate())
      
  return {
    date,
    maxdate
  }
},
methods: {
  doSomething() {
    alert(this.date)
    alert("hello")
    console.log("Check date")
  },
}