CODEWITHSUNDEEP
phpcodeigniterdatepickercodeigniter-3
Programmer
Programmer

Reputation: 157

Dynamically add datepicker with jquery on button click

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"

Upvotes: 0

Views: 55

Answers (1)

Pradeep
Pradeep

Reputation: 9717

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)
    });

});

Upvotes: 1

Related Questions