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.
