How to add date value in dynamically created date field using Jquery

Question

I need one help. I have one json array and I need to add some date value present inside that JSON array in dynamically created date field using Jquery. I am explaining my code below.

$depdate=[  
   {  
      "sett_id":"270",
      "sett_name":"Car",
      "sett_type":"vtypes",
      "id":"6",
      "dep_dates":"31-10-2018,07-11-2018,14-11-2018,21-11-2018,28-11-2018",
      "vehicle_type":"270"
   },
   {  
      "sett_id":"271",
      "sett_name":"Bus",
      "sett_type":"vtypes",
      "id":"7",
      "dep_dates":"01-11-2018,08-11-2018,22-11-2018,15-11-2018,29-11-2018,06-12-2018",
      "vehicle_type":"271"
   }] 

This is my JSON array value which has key dep_dates and it contains all dates with comma separate. I am explaining the code below.

<?php foreach ($depdate as $key => $value) { 
                $dep_date=explode(",",$value['dep_dates']);
                //print_r($dep_date);exit;
              ?>
              <tr>
                <td><?php echo $key+1; ?></td>
                <td><?php echo $value['sett_name']; ?></td>
                <td><div class="input_fields_wrap<?php echo $key+1; ?> form-horizontal"><div style="margin-bottom: 5px;"><input type="text" name="ddate_<?php echo $value['sett_id']; ?>[]" value="" class="depdate<?php echo $key+1; ?> form-control"  style="width:280px;max-width:280px;display:inline-block"><button type="button" class="add_field_button<?php echo $key+1; ?> btn btn-primary" style="margin-left: 2px; margin-top: -5px;min-height: 30px;"><i class="fa fa-plus"></i></button></div></div></td>
                <input type="hidden" name="vid_<?php echo $value['sett_id']; ?>_id" value="<?php echo $value['sett_id']; ?>" >
              </tr>
              <script>
                $(function(){
                  var addButton = $('.add_field_button<?php echo $key+1; ?>');
                  var wrapper = $('.input_fields_wrap<?php echo $key+1; ?>');
                  var nowTemp = new Date();
                  var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
                  $(addButton).click(function(){
                    $(wrapper).append('<div style="margin-bottom: 5px;"><input type="text" name="ddate_<?php echo $value['sett_id']; ?>[]" value="" class="depdate<?php echo $key+1; ?> form-control"  style="width:280px;max-width:280px;display:inline-block"/><button type="button" class="remove_field<?php echo $key+1; ?> btn btn-danger" style="margin-left: 2px; margin-top: -5px;min-height: 30px;"><i class="fa fa-minus"></i></button></div>'); //add input box
                    $('.depdate<?php echo $key+1; ?>').datepicker({
                      format: 'dd-mm-yyyy',
                      onRender: function(date) { 
                        return date.valueOf() < now.valueOf() ? 'disabled' : ''; 
                      } 
                    });
                  })
                  $(wrapper).on('click', '.remove_field<?php echo $key+1; ?>', function(e){
                    e.preventDefault();
                    $(this).parent('div').remove();
                  })
                  $('.depdate<?php echo $key+1; ?>').datepicker({
                    format: 'dd-mm-yyyy',
                    onRender: function(date) { 
                      return date.valueOf() < now.valueOf() ? 'disabled' : ''; 
                    }
                  });
                })
              </script>
              <?php } ?>

Here I have one date field with + button and when user will click on it new field is creating. Here My requirement is if dep_dates has any value it will converted into array and the date field will created dynamically as per no of date value and those value will append into the field. Actually this is the update feature. Please help me to do this.

Answer 1

You are almost close, you want to fill data from $depdate json to the datepicker textbox.

Solution :

1. Get sett_id from PHP and Read json value for the same
2. Convert dep_dates into array
3. Set that array's value getting total datepicker applied dynamically

Please check HTML code below (Read comment line):

 $(document).ready(function () { $depdate = [ { "sett_id": "270", "sett_name": "Car", "sett_type": "vtypes", "id": "6", "dep_dates": "31-10-2018,07-11-2018,14-11-2018,21-11-2018,28-11-2018", "vehicle_type": "270" }, { "sett_id": "271", "sett_name": "Bus", "sett_type": "vtypes", "id": "7", "dep_dates": "01-11-2018,08-11-2018,22-11-2018,15-11-2018,29-11-2018,06-12-2018", "vehicle_type": "271" }] }); $(function () { var addButton = $('.add_field_button1'); var wrapper = $('.input_fields_wrap1'); var nowTemp = new Date(); var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0); $(addButton).click(function () { var sett_id = 0;///Apply PHP code here var myDatesArr = $depdate[sett_id].dep_dates.split(',');///Read json file and convert date into array var crrDatePosition = $('.input_fields_wrap1 .datepicker').length;//Get total existing datepicker $(wrapper).append('<div style="margin-bottom: 5px;"><input type="text" name="ddate_' + sett_id + '" value="' + myDatesArr[crrDatePosition] + '" class="depdate1 datepicker form-control" style="width:280px;max-width:280px;display:inline-block"/><button type="button" class="remove_field1 btn btn-danger" style="margin-left: 2px; margin-top: -5px;min-height: 30px;">-</button></div>'); //add input box $('.depdate1').datepicker({ format: 'dd-mm-yyyy', onRender: function (date) { return date.valueOf() < now.valueOf() ? 'disabled' : ''; } }); }) $(wrapper).on('click', '.remove_field1', function (e) { e.preventDefault(); $(this).parent('div').remove(); }) $('.depdate1').datepicker({ format: 'dd-mm-yyyy', onRender: function (date) { return date.valueOf() < now.valueOf() ? 'disabled' : ''; } }); }) 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.js"></script> <table border="1"> <tr> <td>1</td> <td>Something <input type="hidden" name="vid_1_id" value="1"></td> <td> <div class="input_fields_wrap1 form-horizontal"> <div style="margin-bottom: 5px;"> <input type="text" name="ddate_1" value="" class="depdate1 form-control" style="width:280px;max-width:280px;display:inline-block"> <button type="button" class="add_field_button1 btn btn-primary" style="margin-left: 2px; margin-top: -5px;min-height: 30px;">Click here to add</button> </div> </div> </td> </tr> </table> 

As you can see var sett_id = 0; is applied static by zero, you need to change by its PHP value.