Add a datepicker calendar to multiple dynamically generated fields

Question

Add a datepicker calendar to multiple dynamically generated fields

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

Add Calendar Datepicker | jQuery UI and several dynamically fields?

This snippet of code is only formatting the mask of input : dd / mm / yyyy , I need it to show the calendar when the user clicks inside the input field and allows typing 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' />");                   
            };

javascript asp.net-mvc jquery-ui

asked by anonymous 24.02.2016 / 13:34

2 answers

1

This page has an excellent calendar in English:

link

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.

24.02.2016 / 13:52

InputDialog in vertical How to send dynamically created fields via JSON?

score 2 · Accepted Answer

I do not know how you are calling datepicker() , but you can add the class to the elements you want to add, it looks 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 datepicker() for the focus() event of 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><linkrel="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