Datetime picker and color picker doesn't work for dynamically created

Question

I create fields dynamically after button click. The fields contain color picker and time picker - but when the controls open you cannot select from them. Although both color picker and time picker are working fine in the non-dynamic part of the page.

I think the jQuery/javascript cannot see the dynamic part.

I could use some help.

This is the UI

This is the function that creates the new row:

function addNewActinity(tt, day) {
    debugger
    var div = $("<tr />");
    var rows = $('#TextBoxContainer tr').length;

    $('#activitiesRow').clone().attr('id', 'activitiesRow' + rows).show()
        .appendTo('#TextBoxContainer')
        .find('input').attr('class', 'myDatepicker').datepicker({
            format: 'hh:mm',
            ignoreReadonly: true,
            allowInputToggle: true})
}

When you append the new elements you need to instantiate the datepicker on them. — Rory McCrossan, Mar 20 '19 at 11:38
We need to see your code in order to help you, otherwise we're just guessing as to what the problem is — Rory McCrossan, Mar 20 '19 at 13:41
function addNewActinity(tt, day) { debugger var div = $(""); var rows = $('#TextBoxContainer tr').length; // div.html(GetDynamicTextBox(rows)); $('#activitiesRow').clone().attr('id', 'activitiesRow' + rows).show() .appendTo('#TextBoxContainer') .find('input').attr('class', 'myDatepicker').datepicker({ format: 'hh:mm', ignoreReadonly: true, allowInputToggle: true}) } — Amany Abdelkader, Mar 20 '19 at 13:46
Please edit the question to include the code, as it's unreadable in the comments — Rory McCrossan, Mar 20 '19 at 13:47
@AmanyAbdelkader - For future reference: you added the code sample exactly right, just with one small mistake: you must add a blank line between your last line of text and the indented code sample. Otherwise, excellent. Good job, and welcome to StackOverflow. — cssyphus, Mar 20 '19 at 14:58

score 1 · Answer 1 · answered Mar 20 '19 at 11:40

1

You will have to re-attach the Date Picker and Color Picker after you dynamically create them.

So after you create the new element dynamically, you give it ID. use this ID to attach the Date/Color Picker after creation ($('#datepickerID').datepicker();) you can also use JQuery selectors for class name. ($('.datepicker').datepicker();)

please reference these:

Jquery datepicker on dynamically created inputs changing the date of the first input

Use JQuery Datepicker on dynamically created fields

answered Mar 20 '19 at 11:40

Muhammad Omar ElShourbagy

6,718
2
32
50

i used this but also not work $(document).on("click", ".myDatepicker", function () { $(this).datepicker({ format: 'hh:mm' }); }); – Amany Abdelkader Mar 20 '19 at 12:06
@AmanyAbdelkader this line should not be chained, it shoud be directly from JQuery ".find('input').attr('class', 'myDatepicker').datepicker(" to be "$.find('input').attr('class', 'myDatepicker').datepicker(" – Muhammad Omar ElShourbagy Mar 20 '19 at 15:57
it worked with me when using this $(document).on("click", ".myDatepicker", function () { $(".myDatepickerTxt").timepicker(); }); and add script for jquery-ui – Amany Abdelkader Mar 25 '19 at 14:36

Datetime picker and color picker doesn't work for dynamically created

1 Answers1