umieszczenie datepicker () na dynamicznie tworzonych elementach-JQuery/JQueryUI
Dynamicznie tworzyłem pola tekstowe i chcę, aby każdy z nich mógł wyświetlać kalendarz po kliknięciu. Kod, którego używam to:
$(".datepicker_recurring_start" ).datepicker();
Które będą działać tylko na pierwszym textboxie, mimo że wszystkie moje textboxy mają klasę o nazwie datepicker_recurring_start.
Twoja pomoc jest bardzo doceniana!
12 answers
Oto sztuczka:
$('body').on('focus',".datepicker_recurring_start", function(){
$(this).datepicker();
});
Składnia $('...selector..').on('..event..', '...another-selector...', ...callback...);
oznacza:
Dodaj listener do ...selector..
(body
w naszym przykładzie) dla zdarzenia ..event..
('focus' w naszym przykładzie). Dla wszystkich potomków pasujących węzłów, które pasują do selektora ...another-selector...
(.datepicker_recurring_start
w naszym przykładzie) , zastosuj obsługę zdarzeń ...callback...
(funkcja inline w naszym przykładzie)
Zobacz http://api.jquery.com/on/ a szczególnie sekcja o "delegowanych wydarzeniach"
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-07 15:22:55
Dla mnie poniżej jQuery zadziałało:
Zmiana "body" na document
$(document).on('focus',".datepicker_recurring_start", function(){
$(this).datepicker();
});
Dzięki skafandri
Uwaga: Upewnij się, że Twój identyfikator jest inny dla każdego pola
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:10:26
Doskonała odpowiedź przez skafandri +1
To jest właśnie aktualizowane, aby sprawdzić klasę hasDatepicker.
$('body').on('focus',".datepicker", function(){
if( $(this).hasClass('hasDatepicker') === false ) {
$(this).datepicker();
}
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-17 12:16:06
Upewnij się, że twój element z klasą .date-picker
nie ma już klasy hasDatepicker
. Jeśli tak się stanie, nawet próba ponownej inicjalizacji za pomocą $myDatepicker.datepicker();
zakończy się niepowodzeniem! Zamiast tego musisz to zrobić...
$myDatepicker.removeClass('hasDatepicker').datepicker();
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-25 16:12:37
Musisz ponownie uruchomić .datepicker();
po dynamicznym utworzeniu pozostałych elementów pola tekstowego.
Polecam zrobić to w metodzie callback wywołania, która jest dodawanie elementów do DOM.
Powiedzmy, że używasz metody jQuery Load, aby pobrać elementy ze źródła i załadować je do DOM, zrobiłbyś coś takiego:
$('#id_of_div_youre_dynamically_adding_to').load('ajax/get_textbox', function() {
$(".datepicker_recurring_start" ).datepicker();
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-05-03 14:12:48
Nową metodą dla elementów dynamicznych jest MutationsObserver .. Poniższy przykład używa podkreślenia .js to use (_.each) funkcji.
MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var observerjQueryPlugins = new MutationObserver(function (repeaterWrapper) {
_.each(repeaterWrapper, function (repeaterItem, index) {
var jq_nodes = $(repeaterItem.addedNodes);
jq_nodes.each(function () {
// Date Picker
$(this).parents('.current-repeateritem-container').find('.element-datepicker').datepicker({
dateFormat: "dd MM, yy",
showAnim: "slideDown",
changeMonth: true,
numberOfMonths: 1
});
});
});
});
observerjQueryPlugins.observe(document, {
childList: true,
subtree: true,
attributes: false,
characterData: false
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-04 16:22:10
To mi się udało (używając jQuery datepicker):
$('body').on('focus', '.datepicker', function() {
$(this).removeClass('hasDatepicker').datepicker();
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-09-02 20:17:20
Żadne inne rozwiązanie nie zadziałało. W mojej aplikacji dodaję elementy zakresu dat do dokumentu za pomocą jquery, a następnie stosuję do nich datepicker. Więc żadne z rozwiązań eventowych nie działało z jakiegoś powodu.
To w końcu zadziałało:
$(document).on('changeDate',"#elementid", function(){
alert('event fired');
});
Mam nadzieję, że to komuś pomoże, bo to mnie trochę cofnęło.Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-22 17:09:57
Możesz dodać klasę .datepicker w funkcji javascript, aby móc dynamicznie zmieniać typ wejścia
$("#ddlDefault").addClass("datepicker");
$(".datepicker").datetimepicker({ timepicker: false, format: 'd/m/Y', });
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-23 12:54:26
Zmodyfikowałem odpowiedź @ skafandri, aby uniknąć ponownego zastosowania konstruktora datepicker
do wszystkich wejść z klasą .datepicker_recurring_start
.
Oto HTML:
<div id="content"></div>
<button id="cmd">add a datepicker</button>
Oto JS:
$('#cmd').click(function() {
var new_datepicker = $('<input type="text">').datepicker();
$('#content').append('<br>a datepicker ').append(new_datepicker);
});
Oto demo robocze
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-31 19:31:00
To u mnie działało na JQuery 1.3 i pokazuje się przy pierwszym kliknięciu / fokusie
function vincularDatePickers() {
$('.mostrar_calendario').live('click', function () {
$(this).datepicker({ showButtonPanel: true, changeMonth: true, changeYear: true, showOn: 'focus' }).focus();
});
}
To wymaga, aby Twoje dane wejściowe miały klasę "mostrar_calendario"
Live jest dla JQuery 1.3+ dla nowszych wersji trzeba dostosować to do " on "
Zobacz więcej o różnicy tutaj http://api.jquery.com/live/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-11 21:40:59
$( ".datepicker_recurring_start" ).each(function(){
$(this).datepicker({
dateFormat:"dd/mm/yy",
yearRange: '2000:2012',
changeYear: true,
changeMonth: true
});
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-11 07:57:50