jQuery Datepicker does not work in dynamic element

Question

I have a problem. jQuery Datepicker does not work in a dynamic form, so you can't pick a date. Here is my demo link http://gestionale.odoyabooks.com/sum.php.

JavaScript:

<script>
$(document).ready(function() {
    $('.input_date').on('click', function() {
    $(this).datepicker('destroy').datepicker({showOn:'focus'}).focus();
        });
});
</script>

HTML:

<form action="" method="POST">

<div class="yes">
    <div id="cost1" class="clonedCost" style="display: inline;">
        <table  border="0">
          <tr>          
            <td><label class="date" for="date">Date</label></td>
          </tr>
          <tr>
            <td><input class="input_date" id="date" type="text" name="date[]" /></td>
          </tr>
        </table>
    </div>
    <div id="addDelButtons_cost"><input type="button" id="btnAdd" value=""> <input type="button" id="btnDel" value=""></div>
</div>

</form>

score 14 · Accepted Answer · edited Oct 02 '14 at 04:59

14

The problem is that when you bind the event initially, the new field doesn't exist.

By applying the on click to the body, with the selector .input_date, it should attach the event to the new element in the dynamic form.

$(function() {
    $('body').on('click','.input_date', function() {
        $(this).datepicker('destroy').datepicker({showOn:'focus'}).focus();
    });
});

Working Example

A better way:

You should initialize the datepicker for the field when you create the element.

$(function() {
    $('.input_date').datepicker();
});

function createNewDatepickerInput() {
    var $newInput = $('<input type="text" name="date123" class="input_date" />');
    $newInput.appendTo("form").datepicker();
}

Working Example

edited Oct 02 '14 at 04:59

neshpro9

433
3
17

answered Aug 01 '13 at 19:07

Andy Fleming

7,655
6
33
53

I think you're overcomplicating things. I don't see why you need to destroy it, re-initialize it and focus after clicking the input box... – Webberig Aug 01 '13 at 19:08
2

@Webberig - I left the code inside unchanged. I just changed the event binding, since I believe that is where the problem is. – Andy Fleming Aug 01 '13 at 19:09
i beleive it is better to leave the OPs code unchanged. although mentioning any flaws as a comment helps the guy understand what else he might be doing wrong – SoWhat Aug 01 '13 at 19:10
2

I hereby mention that the OPs code + your answer is overcomplicating things. You just need to call datepicker() after creating the input field, not mess around like that on a click event... – Webberig Aug 01 '13 at 19:14
DesignerGuy@ it does not work. shows an error like Uncaught TypeError: Cannot set property 'currentDay' of undefined – Subir Aug 01 '13 at 19:22
@user1652747 - The first or second way I describe above? Also, what version of jQuery are you using? – Andy Fleming Aug 01 '13 at 19:23
jQuery latest version – Subir Aug 01 '13 at 19:28
No it does not work. shows again jquery ui Uncaught TypeError: Cannot set property 'currentDay' of undefined – Subir Aug 01 '13 at 19:38
I'm not seeing any error with either (using jQuery 2.0.2 and jQuery UI 1.10.3) – Andy Fleming Aug 01 '13 at 19:42
1

Thanks! works great for me! both in `Chrome` & `FF` :) – neshpro9 Oct 02 '14 at 04:25

Webberig · Answer 2 · 2013-08-01T19:18:24.987

1

I don't understand why you're destroying/re-initializing the datepicker. You simply need to call .datepicker() after creating the element. For example:

function createInput() {
    $('<input type="text" name="date" />').appendTo("form").datepicker();
}

Edit: Here's a demo: http://jsfiddle.net/xEmJu/

edited Aug 01 '13 at 19:18

answered Aug 01 '13 at 19:11

Webberig

2,746
1
23
19

jQuery Datepicker does not work in dynamic element

2 Answers2

A better way:

Linked