在fomantic日历中触发月份更改事件答案

【问题标题】：Trigger month change event in fomantic calendar在fomantic日历中触发月份更改事件
【发布时间】：2020-02-20 19:18:25
【问题描述】：

我在我的项目中使用 fomantic 日历。日历显示正确。当月份更改时，我想做一些操作。在 fomantic 日历中是否有任何月份更改事件。发现很难使其工作。提前感谢您的帮助。

<div class="ui calendar" id="calendar">
</div>

我已经像这样初始化了日历 ngOnInit() { $('#calendar').calendar({ 类型：'日期' }); }

enter image description here

当我点击如图所示的箭头图标时，我想做一些动作

【问题讨论】：

请在您的问题中添加一些相关代码，这样会更容易提供帮助
请查看上面的截图和代码

标签： javascript jquery calendar fomantic-ui

【解决方案1】：

Fomantic-UI 日历模块有一个事件onBeforeChange，您可以使用它来确定年份变化

  $('.ui.calendar').calendar({
    type: 'date',
    onBeforeChange: function(newDate){
      var oldDate = $(this).calendar('get date');
      if(!oldDate || oldDate.getFullYear() != newDate.getFullYear()) {
        console.log('Year has changed!');
      }
    }
  });

【讨论】：

【解决方案2】：

初始化完成后，查看Javascript生成的代码可以看到左箭头在class="prev"的div中，右箭头在class="next"的div中。

所以你可以做这样的事情

$('#calendar prev, #calendar next').click(function() {
    //do something
})

【讨论】：

感谢您的回复..不幸的是它没有用。这就是我所拥有的：ngOnInit() { $('#calendar').calendar({ type: 'date' }); } ngAfterViewInit() { $(document).ready(() => { $('#calendar .prev').click(() => { console.log('prev arrow clicked'); }); }) ; }