jQuery datetimepicker не работает в первый раз

Question

У меня есть динамическое поле времени, в котором я использовал jQuery Datetime picker.

Для динамической инициализации я использовал этот код:

$("body").on("focus",".time-input",function(){ 
     $(this).datetimepicker(); 
}); 

Но это работает, когда я сосредотачиваюсь на второй раз.

Рабочая демонстрация будет отличной, если это возможно.

Answer 1

Проблема заключается в том, что вы только создаете экземпляр выбора даты на элементе в первый раз, когда он фокусируется, а затем каждый раз после этого, что не является хорошей идеей. Вместо этого вам нужно только создать его экземпляр на элементе на нагрузке:

$(function() { 
    $('.time-input').datetimepicker(); 
}); 

Если .time-input элемента динамически добавляются в DOM (как я предполагаю, что данный делегированное обработчик события), то вам необходимо вызвать метод datepicker() на он в точке, в которую он добавлен в DOM. Например:

$.ajax({ 
    url: 'mypage.php', 
    success: function(data) { 
     if (data.prop) { 
      var $input = $('<input class="time-input" />').appendTo('#myForm'); 
      $input.datepicker(); 
     } 
    } 
}); 

Answer 2

Initialize datatimepicker на DOM элемента на документ готов

$(function() { 
    $("body").on("focus",".time-input",function(){ 
     $(this).datetimepicker(); 
    }); 
} 

Это позволит решить вашу проблему.

Answer 3

Попробуйте «$ (document.body)» вместо «$ (body)».

$(document.body).on('focus', '.time-input', function(){ 
    $(this).datetimepicker(); 
}); 

Answer 4

Это происходит потому, что событие focusin используется плагин, чтобы показать DatePicker, лучшим решением является инициализация плагина вскоре после того, как входные элементы созданы, но если вы не можете сделать это, вы можете посмотреть на какой-то обходной путь, как

$("body").on("focus", ".time-input", function() { 
 
    if (!$(this).data('xdsoft_datetimepicker')) { 
 
    $(this).datetimepicker({ 
 
     onGenerate: function() { 
 
     if (!$(this).hasClass('initial')) { 
 
      $(this).addClass('initial').triggerHandler('open.xdsoft'); 
 
     } 
 
     } 
 
    }); 
 
    } 
 
}); 
 

 
$('button').click(function() { 
 
    $('#ct').append('<input class="time-input" />'); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.4.5/jquery.datetimepicker.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.4.5/jquery.datetimepicker.js"></script> 
 

 
<div id="ct"> 
 
    <input class="time-input" /> 
 
</div> 
 
<button>Add</button>

Answer 5

Я думаю, вам нужно установить DatePicker после РОМ created.Here ваш код не работает, потому что JQuery datetimepicker не открыть вкладку WHe n инициализировано. и второй раз вы фокусируете свою работу, потому что она уже инициализирована.

так:

//here your dom should be updated you can console the length 
//console.log($('.time-input').length) 
$('.time-input').each(function(){ 
    $(this).datetimepicker(); 
});