时间戳

首页 > 解决方案 > 如何使用 Jquery 在动态创建的日期字段中添加日期值

javascript - 如何使用 Jquery 在动态创建的日期字段中添加日期值

问题描述

我需要一个帮助。我有一个json array，我需要JSON array在使用 Jquery 动态创建的日期字段中添加一些日期值。我在下面解释我的代码。

$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"
   }]

这是我的JSON array值，它有键dep_dates，它包含所有用逗号分隔的日期。我正在解释下面的代码。

<?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 } ?>

在这里，我有一个带有+按钮的日期字段，当用户单击它时，正在创建新字段。这里我的要求是，如果dep_dates有任何值，它将转换为数组，并且日期字段将根据日期值动态创建，并且这些值将附加到字段中。其实这就是update特点。请帮助我做到这一点。

标签： javascriptphpjqueryjquery-ui-datepicker

解决方案

您几乎接近了，您想将数据从$depdatejson 填充到datepicker文本框。

解决方案 ：

  1. 从 PHP 中获取sett_id并读取相同的 json 值
  2. 转换dep_dates成数组
  3. datepicker设置该数组的值动态应用总计

请检查下面的 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>

如您所见var sett_id = 0;，静态应用为零，您需要更改其 PHP 值。

推荐阅读