Add a datepicker calendar in multiple dynamically generated fields

Question

How to add the calendar Datepicker | jQuery UI and various fields servants dynamically ?

This snippet of code is only formatting the mask of input: dd/mm/yyyy, i need to show the calendar when the user clicks inside the field input and allow to type only numbers:

            for (var i = 0; i < _qtde; i++) {
                var new_date = new Date();
                new_date.setMonth(new_date.getMonth() + i);
                $("#divParcela").append("<div class='col-xs-4'> <label>Vencimento - parcela " + parseInt(i + 1) + "</label> <input type='text' name='DataVencimentoParcela[]' id='DataVencimentoParcela" + parseInt(i + 1) + "' value='" + $.datepicker.formatDate('dd/mm/yy', new_date) + "' class='form-control' />");                   
            };

Answer 1

I don’t know what you’re calling it datepicker(), but you can add the class to the elements you want to add, it would look like this:

 for (var i = 0; i < 5; i++) {//Coloquei o i como 5 apenas para testes
                var new_date = new Date();
                new_date.setMonth(new_date.getMonth() + i);
                $("#divParcela").append("<div class='col-xs-4'> <label>Vencimento - parcela " + parseInt(i + 1) + "</label> <input type='text' class='datepicker' name='DataVencimentoParcela[]' id='DataVencimentoParcela" + parseInt(i + 1) + "' value='" + $.datepicker.formatDate('dd/mm/yy', new_date) + "' class='form-control' />");                   
            };

And call the datepicker() by the event focus() jQuery. This would be the complete example:

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

$(document).ready(function(){
 for (var i = 0; i < 5; i++) {//Coloquei o i como 5 apenas para testes
                var new_date = new Date();
                new_date.setMonth(new_date.getMonth() + i);
                $("#divParcela").append("<div class='col-xs-4'> <label>Vencimento - parcela " + parseInt(i + 1) + "</label> <input type='text' class='datepicker' name='DataVencimentoParcela[]' id='DataVencimentoParcela" + parseInt(i + 1) + "' value='" + $.datepicker.formatDate('dd/mm/yy', new_date) + "' class='form-control' />");                   
            };
});

  <script type="text/javascript" src="//code.jquery.com/jquery-1.7.1.js"></script>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>    
      <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/mint-choc/jquery-ui.css">

<div class="demo">

<p>Data Normal: <input id="datepicker" class="datepicker" type="text"></p>

</div><!-- End demo -->
Campos dinamicos:
<div id="divParcela">

</div>

Example in Jsfiddle

Answer 2

this page has an excellent calendar in English:

http://www.tidbits.com.br/click-calendario-plugin-de-jquery-para-calendarios-em-portugues

To implement in several fields, just name each field with the same prefix and do so:

$(document).ready(function(){

    $("input[name^='data']" ).focus(function(){ \\\o nome do campo será data1; data2; etc

        var id = $(this).attr('id');

        $(this).calendario({
            target:'#'+id,
            closeClick:true 
        });
    });
});

Good luck.