CODEWITHSUNDEEP
jqueryjquery-ui
Firefog
Firefog

Reputation: 3174

Date picker is not working on dynamically added html element

Date picker is not working on my dynamically added html table input field. I use clonefunction for make dynamic field.

If the parent has value the date picker is not working but it work if the parent is empty. or sometime works sometime not. acting like strange :(

What I am doing wrong can any one help me with this ? Thanks in advance

I am using jquery-ui datepicker

Here is my Fiddle

$('body').on('focus',".datepicker", function(){
    $(this).datepicker({
        dateFormat: "dd/mm/yy",
        changeMonth: true,
        changeYear: true,
        yearRange: '1930:-14',
    });
});

Upvotes: 0

Views: 934

Answers (1)

Muhammad Osama
Muhammad Osama

Reputation: 1047

The problem with your code is when you clone the input from the above rows, it'll have the clone the hasDatepicker class too which will break it.

To test it, just don't focus the input and add an extra row and focus the second row's input and it'll work.

Here's the solution to this.

                $('body').on('focus',".datepicker", function(){
                $(this).datepicker({ //Change this line here

to

                $('body').on('focus',".datepicker", function(){
                $(this).removeClass('hasDatepicker').datepicker({ //Change this line here

It will first reset the input then initialize the datePicker

Upvotes: 4

Related Questions