[英]How to add date value in dynamically created date field using Jquery
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. 我有一个
json array
,我需要在使用jQuery动态创建的date字段中的JSON array
中添加一些日期值。 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. 这是我的
JSON array
值,具有键dep_dates
,它包含所有用逗号分隔的日期。 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. 在这里,我的要求是,如果
dep_dates
具有任何值,它将转换为数组,并且date字段将根据date no的值动态创建,并且这些值将追加到该字段中。 Actually this is the update
feature. 实际上,这是
update
功能。 Please help me to do this. 请帮我做到这一点。
You are almost close, you want to fill data from $depdate
json to the datepicker
textbox. 你几乎关闭,要填补数据
$depdate
JSON的datepicker
文本框。
Solution : 解决方案:
sett_id
from PHP and Read json value for the same sett_id
并读取json值相同 dep_dates
into array dep_dates
转换为数组 datepicker
applied dynamically datepicker
Please check HTML code below (Read comment line): 请检查下面的HTML代码(阅读注释行):
$(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;
如您所见
var sett_id = 0;
is applied static by zero, you need to change by its PHP value. 被零静态应用,则需要更改其PHP值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.