如果我在 vuetify 的日期选择器中单击下个月的图标，如何添加按钮单击以调用方法？

Posted 2023-02-22

【中文标题】如果我在 vuetify 的日期选择器中单击下个月的图标，如何添加按钮单击以调用方法？

【英文标题】：How can I add button click for call a method if I click icon next month in the datepicker on vuetify?

【发布时间】：2020-02-10 22:37:21

【问题描述】：

我想问。如果我在日期选择器中单击下个月的图标，如何添加按钮单击以调用方法？

看看这个：

我该怎么做？

更新：

我使用 vuetify：https://vuetifyjs.com/en/components/date-pickers#date-pickers-allowed-dates

【问题讨论】：

如果您无权访问按钮的代码，则将点击处理程序添加到您有权访问的父级。由于事件冒泡，单击按钮时将调用您的侦听器。只需确保在您的侦听器中添加检查以查看已单击的内容。

据我所知，到目前为止它的文档是它会发出input 事件。所有点击都会发出该事件，因此您需要添加我之前提到的检查。

@a1626 我尝试<v-date-picker @input="test">，但它不起作用

【参考方案1】：

日期选择器模板

<v-date-picker @update:picker-date="updatePickedMonth"></v-date-picker>

//Js函数：

updatePickedMonth(value)
 console.log(value) // will return ex: 2021-09

【参考方案2】：

我在 Vuetify 的 v-date-picker 上获得了这些事件

在模板中：

  <v-date-picker
      ref="cal"
      ...
   >

在脚本中：

mounted() 
  var vm = this;
  document.querySelector("[aria-label='Next month']").addEventListener('click', function () 
    console.log('next');
    var yyyy_mm = vm.$refs.cal.$data.tableDate;
    console.log(yyyy_mm);
  )
  document.querySelector("[aria-label='Previous month']").addEventListener('click', function () 
    console.log('previous');
    var yyyy_mm = vm.$refs.cal.$data.tableDate;
    console.log(yyyy_mm);
  )

你可以覆盖 aria-label

next-month-aria-label="NextMonth"
prev-month-aria-label="PreviousMonth"

【参考方案3】：

您可能正在寻找这样的东西：

https://vuetifyjs.com/en/components/date-pickers#date-pickers-react-to-displayed-month-year-change

基本上你应该使用 picker-date.sync 属性并使用观察者观察它的变化。

<v-date-picker v-model="date" :picker-date.sync="pickerDate"/>

export default 
  data() 
    return 
      date: new Date().toISOString().substr(0, 10),
      pickerDate: null,
    
  ),
  watch: 
    pickerDate (newval,oldval) 
      // here you can check if month changed using newval and oldval
    ,
  ,

【讨论】：

嗨。我想再问一次。我可以显示这个月的所有日期吗？比如datepicker显示的时候是10月14日到10月31日的console.log()，我选择11月的时候是11月1日到11月30日的console.log()怎么办？

@SuccessMan 这是您必须手动执行的操作。获得当前月份后，您应该创建一个从该月的第一天（或今天）到最后一天的数组。您可以使用 momentjs（或 vue-moment，专门用于 vue），它是一个包含许多有用的日期函数的库

好的，谢谢。以前我认为它可以在 vuetify 上自动完成

@SuccessMan 不幸的是没有。如果您将使用 momentjs，这是一个可以帮助您的功能：momentjs.com/docs/#/displaying/days-in-month

好的，谢谢。但是如何在 vuetify 中安装 moment js？

【参考方案4】：

你可以试试这个

   $(document).on('click', '.ui-datepicker-next', function () 
     console.log('next');  
    )

    $(document).on('click', '.ui-datepicker-prev', function () 
      console.log('prev');  
    )

【讨论】：

我使用 vuetify vuetifyjs.com/en/components/…