Datepicker does not work

Asked

Viewed 853 times

1

I’m building a system in which I have to register plane of steels, so far so good...

At the time of registration there are three inputs, What, Who and When as shown below: inserir a descrição da imagem aqui

The problem is when I click on the new field "When?" because datepicker does not appear again... inserir a descrição da imagem aqui

Follows the code:

Script:

<script>
    $.(function(){
        $(".datepicker").datepicker({});

        $(".inserirItens").on('click', function() {
            var inputs = "aqui eu defino o html dos meus inputs que vão ser adicionados posteriormente";
            $(this).closest('.form-group').append(inputs);
        });
    });
</script>

HTML

<div class="form-group">
    <input type="text" name="oque" class="">
    <input type="text" name="quem" class="">
    <input type="text" name="quando" class="datepicker">
    <button class="inserirItens"><i class='icon icon-plus' ></i></button>
</div>
php jquery jquery-ui datepicker

  • Try adding the insert functionItens after the append the following snippet: $(this).closest('.form-group').find('#datepicker').datepicker({}); //Only swap by the specific id or class there in find; so each dynamically added item will be treed to the datepicker function. The same did not work because you just initialize the first... and the rest that is created dynamically is not tied to the datepicker.

  • @Rafaelwithoeft... didn’t work...I tried to put the :last, which is for him to catch the last element with the class datepicker... but without result

  • Because you’re passing an empty object to the method .datepicker();? it should be with nothing.

  • @Sergio depends, in my case I do not pass, but it does not influence what is happening

  • 1

    Could you try something like what? http://stackoverflow.com/questions/10433154/putting-datepicker-on-dynamically-created-elements-jquery-jqueryui, so each input that is a datepicker and that receives Focus he will specify as datepicker. Link code: $('body').on('focus',".datepicker_recurring_start", function(){&#xA; $(this).datepicker();&#xA;});​ Just change into your situation.

  • Use the solution @Rafaelwithoeft posted, just change the filter of the find for .datepicker and remember to leave the append before: $(this).closest('.form-group').append(inputs).find(".datepicker").datepicker({});

  • Rafaelwithoeft and Oeslei -> nothing...

  • How do you assemble these inputs? It comes from another page or is always fixed in your javascript?

  • @Tafarel_brayan can make a jsFiddle to reproduce the problem.

  • @Rafaelwithoeft, I have in my code the inputs mounted inside a div that this with display:None, and every time I click insert, I go in this div and get with html() the inputs...

  • @Sergio, I don’t have jsFiddle, but I will make one and assemble for you to see..

  • Tarafel could try maybe then? newDiv = myDiv.clone(true).insertAfter(mydest); &#xA; // attach datepickers by instance rather than by class&#xA; newDiv.find('input.datefield').datepicker(); Source: http://stackoverflow.com/questions/2441061/problem-when-cloning-jquery-ui-datepicker

Show 7 more comments

2 answers

1

$('body').on('focus','.datepicker', function(){
    $(this).datepicker();
});

  • didn’t work out that way...

0


I was able to solve it this way...

$(".inserirItens").on('click', function() {
    var inputs = "aqui eu defino o html dos meus inputs que vão ser adicionados posteriormente";
    $(this).closest('.form-group').append(inputs);
    $(".inputDatepicker").datepicker("destroy");
    $(".inputDatepicker").datepicker("refresh");
});

I just haven’t figured out why I have to destroy the datepicker all the time and then give it a refresh... but solved my case

Source: jqueryui/Datepicker

Browser other questions tagged php jquery jquery-ui datepicker

You are not signed in. Login or sign up in order to post.