Dynamically add datepicker with jquery on button click

Question

This is my button

<div class="block">
<?=form_line(lang('start_date'),form_input('start_date', date('Y-m-d')))?>
<a id="Add">Click to add textbox</a>
</div>

<script type="text/javascript">
$(document).ready(function() {

$('input[name=start_date]').datepicker({maxDate: constants.MAX_YEAR+'-12-31', changeYear: true, changeMonth: true, dateFormat:'yy-mm-dd'});
$('input[name=end_date]').datepicker({maxDate: constants.MAX_YEAR+'-12-31', changeYear: true, changeMonth: true, dateFormat:'yy-mm-dd'});

 $("#Add").on("click", function() {
        var row = '<?=form_line(lang('start_date'),form_input('start_date', date('Y-m-d')))?>';
        $('block').append(row)
    });

}) // eof ready
</script>

How do i append form_line(lang('start_date'),form_input('start_date', date('Y-m-d')))?>

while clicking on the link "Click to add textbox"

What is the goal exactly - to add a new datepicker with each click of the "add textbox" right? — dmgig
– dmgig, Commented Jun 19, 2018 at 15:38

Pradeep · Accepted Answer · 2018-06-19 18:28:17Z

1

Do something like this for dynamically added elements

$('body').on('focus',".datepick", function(){
    $(this).datepicker({
      maxDate: constants.MAX_YEAR+'-12-31', 
      changeYear: true, 
      changeMonth: true, 
      dateFormat:'yy-mm-dd'
     });
});

Just add class datepick to your form input like this :

$(document).ready(function() {
     $("#Add").on("click", function() {
        var row = '<?=form_line(lang('start_date'),form_input('start_date', date('Y-m-d'),'class="datepick"'))?>';
        $('block').append(row)
    });

});

answered Jun 19, 2018 at 18:28

Pradeep

9,70713 gold badges29 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pradeep Over a year ago

pls don't hesitate to accept my answer as answer if its help you really

Collectives™ on Stack Overflow

Dynamically add datepicker with jquery on button click

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related