jquery - Datepicker show legenda 以下月份在下个月点击时消失

Question

我的日期选择器下方有一个不错的图例，它运行良好，直到您点击下个月。我添加了链接，因为它很难解释，单击“Prijzen 2013”​​选项卡，然后单击 periode toevoegen 以添加日期选择器。

https://www.huurhulp.nl/wijzigen/wijzigen.php?wijzigen_adv=4&code=321fa6715e552e9bd495753f44b04db8

这是完成这项工作的函数（在日期选择器中显示之前）：

function insertMessage() {
    var legenda = '<div class="legenda"><table cellpadding="0" cellspacing="0" style="font-size:11px;color:silver;"><tr><td>Let op! Overlap in afwijkende prijzen is niet mogelijk.</td><td>Gesloten:&nbsp;&nbsp;</td><td style="background-color:red;width:15px;"></td>'
    legenda = legenda + '<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Afwijkende prijs:</td><td style="background-color:#00A800;width:15px;"></td></tr></table></div>';
    clearTimeout(insertMessage.timer);
    if ($('#ui-datepicker-div .ui-datepicker-calendar').is(':visible')){
        $('#ui-datepicker-div').append(legenda);
    }
    else {
       insertMessage.timer = setTimeout(insertMessage, 10);
    }
}

我试过这个，但不起作用：

$('#ui-datepicker-div').delegate('.ui-datepicker-prev, .ui-datepicker-next', 'click', insertMessage);

Answer 1

function insertMessage(next) {
var legenda = '<div class="legenda"><table cellpadding="0" cellspacing="0" style="font-size:11px;color:silver;"><tr><td>Let op! Overlap in afwijkende prijzen is niet mogelijk.</td><td>Gesloten:&nbsp;&nbsp;</td><td style="background-color:red;width:15px;"></td>';
legenda = legenda + '<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Afwijkende prijs:</td><td style="background-color:#00A800;width:15px;"></td></tr></table></div>';
clearTimeout(insertMessage.timer);
if ($('#ui-datepicker-div .ui-datepicker-calendar').is(':visible')){
    if (next == 1){
        insertMessage.timer = setTimeout(insertMessage, 10);
    }        
    $('#ui-datepicker-div').append(legenda);
}
else {
   insertMessage.timer = setTimeout(insertMessage, 10);
}

}

Answer 2

根据此处的文档，该onChangeMonthYear功能可能是您所需要的。

$('#ui-datepicker-div').datepicker({
  ...
  onChangeMonthYear: function( year, month, inst ) {
    insertMessage();
    },
  }
});

或类似的东西。当日期选择器移动到新的月份/年份时调用它。