I have certain elements which I am adding dynamically using Jquery. Bootstrap Datepicker works fine on input elements that are already present on page load but doesnt work with dynamically added elements. So I tried using .on function of Jquery. But I am getting the following error when I place datepicker bind code anywhere within document ready.

Error:

Uncaught TypeError: $(...).datetimepicker is not a function

Script

   <script type="text/javascript">
        $(document).ready(function () {
            $('body').on('click', 'div[id^="datetimepicker"]', function () {
                alert();

                $('div[id^="datetimepicker"]').datetimepicker({
                    useCurrent: false 
                });

            });
        });

</script>

UPDATE:

This doesnt work on any element (datetimepicker is not a function):

   $('body').on('click', "div[id^='datetimepicker']", function () {
             console.log(this);
             $(this).datetimepicker({
                     useCurrent: false //Important! See issue #1075
                });
        });

This works only on elements that are already present:

$('#griddt').find('div[id^="datetimepicker"]').datetimepicker({
        useCurrent: false //Important! See issue #1075
    });

UPDATE 2: (click inside the first textbox to add new row of grid, click inside second to see the calendar - which works only within first row) /

I have certain elements which I am adding dynamically using Jquery. Bootstrap Datepicker works fine on input elements that are already present on page load but doesnt work with dynamically added elements. So I tried using .on function of Jquery. But I am getting the following error when I place datepicker bind code anywhere within document ready.

Error:

Uncaught TypeError: $(...).datetimepicker is not a function

Script

   <script type="text/javascript">
        $(document).ready(function () {
            $('body').on('click', 'div[id^="datetimepicker"]', function () {
                alert();

                $('div[id^="datetimepicker"]').datetimepicker({
                    useCurrent: false 
                });

            });
        });

</script>

UPDATE:

This doesnt work on any element (datetimepicker is not a function):

   $('body').on('click', "div[id^='datetimepicker']", function () {
             console.log(this);
             $(this).datetimepicker({
                     useCurrent: false //Important! See issue #1075
                });
        });

This works only on elements that are already present:

$('#griddt').find('div[id^="datetimepicker"]').datetimepicker({
        useCurrent: false //Important! See issue #1075
    });

UPDATE 2: (click inside the first textbox to add new row of grid, click inside second to see the calendar - which works only within first row) https://jsfiddle/a8j30rcw/1/

• javascript
• jquery
• html
• twitter-bootstrap
• bootstrap-datepicker

Share Improve this question Follow edited Aug 22, 2017 at 17:15 SamuraiJack asked Aug 22, 2017 at 11:42 SamuraiJackSamuraiJack 5,5691818 gold badges103103 silver badges212212 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You should not try to listen on datetime picker based on an id attribute at all. The reason is that adding elements dynamically inside the page may create more than one occurrences of the datetime picker w

$(document).ready(function() {
  $('.form-group').html(`<div class='datetimepicker input-group date'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>`);
});


$('body').on('click', '.datetimepicker', function() {
  var tp = $(this);
  if (tp.data().DateTimePicker) {
    return true;
  }
  tp.datetimepicker({
    useCurrent: false
  });
  tp.data().DateTimePicker.show();
});

/* Optional theme */

@import url('https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css');
@import url('//netdna.bootstrapcdn./bootstrap/3.0.0/css/bootstrap-theme.min.css');
@import url('https://maxcdn.bootstrapcdn./font-awesome/4.3.0/css/font-awesome.min.css');
@import url(https://cdn.rawgit./Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css')

<script src="https://code.jquery./jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit./Eonasdan/bootstrap-datetimepicker/master/build/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">

      </div>
    </div>
  </div>
</div>

ith the same id. Yet again id has to be unique.

Use a class (datetimepicker) or some HTML data-attribute then listen for it. Since the event handles dynamic elements added after page load you don't actually need $(document).ready at all although you may add it without any side effects.

    $('body').on('click', '.datetimepicker', function(){
        var tp = $(this);
        if (tp.data().DateTimePicker) {
            return true;
        }
        tp.datetimepicker({useCurrent: false});
        tp.data().DateTimePicker.show();
    });

Update: On click you just initialized the picker everytime a click occurs. Never triggered the show method. I check if time-picker is initialized during the first click if not, I initialize it and showing the picker. In any other case I leave timepicker code to do its job by returning early.

Update: JSFiddle Example

Whereever you are calling datepicker function use like this:-

$('body').on('click',"#datetimepicker", function(){
    $(this).datetimepicker();
});

​

I can see 2 possibilities

1: either datetimepicker script is not loaded yet,

2: datetimepicker id isn't available to jquery

for both above case you can try timeout just to see if this is the issue

setTimeout(function(){ 

// call to datepicker 
    $('div[id^="datetimepicker"]').datetimepicker({
           useCurrent: false 
    });

 }, 200);

if this doesnt work it means you have duplicate ids. instead of id use class to refer to your element

$('.datepickerclass').datetimepicker({
           useCurrent: false 
    });