I have a dynamic time field in which I used jQuery Datetime picker.

For dynamic initialization I used this code:

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

But it works when I focus for second time.

A working demo would be great, if possible.

I have a dynamic time field in which I used jQuery Datetime picker.

For dynamic initialization I used this code:

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

But it works when I focus for second time.

A working demo would be great, if possible.

• javascript
• jquery
• jquery-ui
• datetimepicker

• try to change $("body") to $(document) – oleh.meleshko Commented Jan 11, 2016 at 11:50

5 Answers 5

The issue is because you only instantiate the date picker on the element the first time it gets focussed, and then every time after, which isn't a good idea. Instead you only need to instantiate it on the element on load:

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

If the .time-input element is dynamically appended to the DOM (as I am assuming given the delegated event handler) then you need to call the datepicker() method on it at the point it's added to the DOM. For example:

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

It is because the focusin event is used by the plugin to show the datepicker, the better solution is to initialize the plugin soon after the input elements are created, but if you can't do that, you can look at some workaround like

$("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./ajax/libs/jquery-datetimepicker/2.4.5/jquery.datetimepicker.css" rel="stylesheet" />
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery-datetimepicker/2.4.5/jquery.datetimepicker.js"></script>

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

Initialize datatimepicker on DOM element on document ready

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

This will solve your problem.

Try "$(document.body)" instead "$(body)".

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

I think you need to set datepicker after your dom is created.Here your code is not working because jquery datetimepicker not open the tab when initialized. and second time you focus its work because its already initialized.

like this:

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