jQuery UI Datepicker - 如何更改Datepicker HTML

我需要對由jQuery UI Datepicker生成的Datepicker HTML進行一些簡單的更改，例如在日曆表後添加一些簡短的文字。jQuery UI Datepicker - 如何更改Datepicker HTML

我一直在嘗試這種使用beforeShow事件做的，但同時我可以訪問使用該當前的HTML，操縱它不工作：

beforeShow: function(input, inst) { 
//#this works 
alert($('#ui-datepicker-div').html()); 
//#this does nothing 
$('#ui-datepicker-div').append('message');   
}

我想這可能是因爲日期選擇器的HTML元素被添加到DOM後，因此需要實時方法來更新HTML，但我不知道如何使用此函數回調掛接實時方法。或者我完全可以用錯誤的方式來解決這個問題。

我真的很感激，如果有人能幫助我，因爲我已經搜索並嘗試了很多東西，但我似乎無法得到這個工作。謝謝。

來源

2011-07-11 Tidy

，爲什麼不乾脆直接添加這些元素在HTML中？ –

今天早上我很清楚自己也想知道同樣的事情！ :)如果可能的話，我希望避免編輯核心代碼，以便日後的維護工作更輕鬆。我假設從回調中操縱HTML並且我只是使用了錯誤的代碼行會很容易。 – Tidy

我想要做同樣的事情，除了我需要使用wrapInner（），它再次沒有影響。有趣的是，removeClass（）和addClass（）似乎工作正常。我只想在日期選擇器打開的時候這樣做... – Sniffer

看起來好像你需要等到.ui-datepicker-calendar表被插入到#ui-datepicker-div來追加你的信息。你可以做一個計時器以檢查：

$('#datepicker').datepicker({ 
    beforeShow: function(input, inst) { 
     insertMessage(); 
    } 
}); 

// listen to the Prev and Next buttons 
$('#ui-datepicker-div').delegate('.ui-datepicker-prev, .ui-datepicker-next', 'click', insertMessage); 

function insertMessage() { 
    clearTimeout(insertMessage.timer); 

    if ($('#ui-datepicker-div .ui-datepicker-calendar').is(':visible')) 
     $('#ui-datepicker-div').append('<div>foo</div>'); 
    else 
     insertMessage.timer = setTimeout(insertMessage, 10); 
}

~~看到它在行動： http://jsfiddle.net/william/M9Z7T/2/。~~

看到它的行動：http://jsfiddle.net/M9Z7T/126/。

來源

2011-09-02 23:20:37

輝煌的威廉 - 感謝您去設置示例的麻煩 – Tidy

當您更改月份時，將重置消息。 –

酷！但是之前提到的消息在您更改月份時會重置。有沒有辦法保持消息？ –

$('.datepicker').datepicker({ beforeShow: function() { 
     setTimeout(appendsomething, 10); 
    }, 
    onChangeMonthYear: function() { 
     setTimeout(appendsomething, 10); 
     } 
    } 
    ); 

var appendsomething = function() { 
    $("#ui-datepicker-div").append("<div class='something'>something</div>"); 
}

來源

2013-06-06 06:57:15

單擊下一個/上一個月份按鈕時，這似乎工作。我建議在解決方案中增加一些評論以解釋這似乎解決了@Clyde Lobo遇到的問題。我一直在尋找幾個星期來解決這個問題。謝謝！ – timmackay

也許它的工作原因是計時器沒有被清除。在我的情況下onChangeMonthYear根本不工作。 –

我使用以下技巧來修補_generateHTML函數。以下示例使用正則表達式將jQuery-ui類替換爲jQuery-mobile類。根據您的需要修改：

(function() { 
    $.datepicker._generateHTML_old = $.datepicker._generateHTML; 
    $.datepicker._generateHTML = function (inst) { 
     var html = this._generateHTML_old(inst); 
     html = html.replace(/<a class="(ui-datepicker-prev ui-corner-all)(ui-state-disabled)?"/, '<a class="$1 ui-btn ui-btn-left ui-icon-carat-l ui-btn-icon-notext$2"'); 
     html = html.replace(/<a class="(ui-datepicker-next ui-corner-all)(ui-state-disabled)?"/, '<a class="$1 ui-btn ui-btn-right ui-icon-carat-r ui-btn-icon-notext$2"'); 
     html = html.replace(/<span class="ui-icon ui-icon-circle-triangle-.">(.+?)<\/span>/g, '$1'); 
     return html; 
    }; 
})();

編輯：使用正則表達式/字符串函數來編輯HTML實際上是一個壞主意。考慮將HTML放在元素中，操縱並獲取生成的HTML。

來源

2014-03-19 14:35:11

它可以簡單地做，因爲這（這一點也適用新的日期選擇器）：如果你正在做的是將元素添加到日期選擇器的底部

$('.datepicker').datepicker('show'); 
$(".ui-datepicker").append(<div>Foo</div>); 

$(document).on('click', '.ui-datepicker-next', function() { 
    $(".ui-datepicker").append(<div>Foo</div>); 
}) 

$(document).on('click', '.ui-datepicker-prev', function() { 
    $(".ui-datepicker").append(<div>Foo</div>); 
})

來源

2016-10-25 08:16:32 slowpoke123

jQuery UI Datepicker - 如何更改Datepicker HTML

回答

相關問題