javascript - 从输入中获取整数值并动态生成输入

Question

我想在焦点从“结束日期”输入中动态获取输入并将天数传递给 JQuery 并生成它。我尝试了此代码，但没有在职的从几天中获取值(value)并生成面板数量......就是这样

<script>
    jQuery(function ($) {
        var $from = $("#firstDate"),
                $to = $("#secondDate");

        $from.datepicker({
            numberOfMonths: 1,
            minDate: 0,
            dateFormat: 'dd-mm-yy',
            onClose: function (selectedDate) {
                $to.datepicker("option", "minDate", selectedDate);
            }
        });

        $to.datepicker({
            defaultDate: "+1w",
            numberOfMonths: 1,
            minDate: 0,
            dateFormat: 'dd-mm-yy',
            onClose: function (selectedDate) {
                $from.datepicker("option", "maxDate", selectedDate);
            }
        });
        $from.add($to).change(function () {
            var dayFrom = $from.datepicker('getDate');
            var dayTo = $to.datepicker('getDate');
            if (dayFrom && dayTo) {
                var days = calcDaysBetween(dayFrom, dayTo);
                $('#days').attr('value',days);
//
            }
        });

        function calcDaysBetween(startDate, endDate) {
            return (endDate - startDate) / (1000 * 60 * 60 * 24);
        }
    });
</script>

<script type="text/javascript">
    $(document).on('focusout','#secondDate',function(){
        var i;
        var val=$("#days").val();
       // e.preventDefault();
        for(i=1;i<val;i++){
        var panelHtml = '<input type="text" name="in_day[]" id="in_days[]"';

            $(this).find(".row").append(panelHtml);
        }

    });
</script>

<label>Start Date</label>
<input class="form-control" id="firstDate" name="firstDate" placeholder="dd/mm/yyyy" type="text"/>
<label>End Date</label>
<input class="form-control" id="secondDate" name="secondDate" placeholder="dd/mm/yyyy" type="text"/>
<label>Number of Days</label>
<input type="text" class="form-control" id="days" name="days" value="">

<div class="row">
<!--Input generate Here-->
</div>

Answer 1

i want to get Panels dynamically when focus out from "Date" input and pass the number of days to JQuery and generate it.i tried this code but not working Get Value from days and generate number of panels..thats it

我将焦点从焦点移出稍微更改为单击事件，并将输入格式设置为按钮。你可能总是会变回来。您遇到的问题是:

$(this).closest(".it-right-side").find(".panel-group").append(panelHtml);

具有类 it-right-side 的元素不是最接近的元素。正确的做法是:

$(this).closest('.col-md-2').siblings(".it-right-side").find(".panel-group")

它是最接近的 col-md-2 元素的同级元素。

此外，我之前添加了空白来填充面板组。

如果您需要在选择日期时自动创建面板，请更改“$from.add($to).change(function () {”内的这一行:

$('#days').attr('value', days)

至:

$('#days').attr('value', days).trigger('click');

代码片段:

$(document).on('click', '#days', function () {
  var i;
  var val = $(this).val();
  if (val == 0) {
      return;
  }
  var panelGroup = $(this).closest('.col-md-2').siblings(".it-right-side").find(".panel-group");
  panelGroup.empty();
  for (i = 0; i < val; i++) {
      var panelHtml = '<div class="panel panel-info"> ' +
              '<div class="panel-heading"> ' +
              '<h4 class="panel-title"> ' +
              '<a data-toggle="collapse" data-parent="#accordion" href="#collapse' + i + '">Day ' + (i + 1) + '<i class="fa fa-plus pull-right" aria-hidden="true"></i></a></h4>' +
              '</div> ' +
              '<div id="collapse' + i + '" class="panel-collapse collapse"> ' +
              '<div class="panel-body">' +
              '<div class="row" > ' +
              '<div class="col-md-12 sch-box">' +
              '<div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-s-time" name="sch-s[]"></div> ' +
              '<div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-e-time" name="sch-e[]"></div> ' +
              '<div class="col-md-12 form-group"><input type="text" class="form-control" placeholder="Enter Description" id="sch-title" name="sch-title[]"></div> ' +
              '<div class="col-md-12 form-group"><textarea id="sch-title" class="form-control vresize" name="sch-title[]"></textarea></div> ' +
              '</div> ' +
              '</div> ' +
              '</div> ' +
              '<button type="button" class="btn center-block panel-addbtn" ><i class="fa fa-plus"></i> </button> ' +
              '</div> ' +
              '</div>';

      panelGroup.append(panelHtml);
  }
});


var $from = $("#firstDate"),
        $to = $("#secondDate");

$from.datepicker({
    numberOfMonths: 1,
    minDate: 0,
    dateFormat: 'dd-mm-yy',
    onClose: function (selectedDate) {
        $to.datepicker("option", "minDate", selectedDate);
    }
});

$to.datepicker({
    defaultDate: "+1w",
    numberOfMonths: 1,
    minDate: 0,
    dateFormat: 'dd-mm-yy',
    onClose: function (selectedDate) {
        $from.datepicker("option", "maxDate", selectedDate);
    }
});
$from.add($to).change(function () {
    var dayFrom = $from.datepicker('getDate');
    var dayTo = $to.datepicker('getDate');
    if (dayFrom && dayTo) {
        var days = calcDaysBetween(dayFrom, dayTo);
        $('#days').attr('value', days).trigger('click');
//
    }
});

function calcDaysBetween(startDate, endDate) {
    return (endDate - startDate) / (1000 * 60 * 60 * 24);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<div class="col-md-5">
    <div class="form-group"> <!-- Date input -->
        <label class="control-label" for="firstDate">Start Date</label>
        <input class="form-control" id="firstDate" name="firstDate" placeholder="dd/mm/yyyy" type="text"/>
    </div>
</div>
<div class="col-md-5">
    <div class="form-group"> <!-- Date input -->
        <label class="control-label" for="secondDate">End Date</label>
        <input class="form-control" id="secondDate" name="secondDate" placeholder="dd/mm/yyyy" type="text"/>
    </div>
</div>
<div class="col-md-2">
    <div class="form-group">
        <label class="form-control-label">Day(s)</label>
        <input type="button" class="form-control btn btn-primary" id="days" name="days" value="0">
    </div>
</div>

<!--Panel Create here-->
<div class="col-md-6 it-right-side">
    <p><b>Set your schedules</b></p>

    <div>
        <div class="col-md-12" id="dynamicInput">
            <!--Start Panel-->
            <div class="panel-group" id="accordion">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse1"> Day 1<i
                                    class="fa fa-plus pull-right" aria-hidden="true"></i></a></h4>
                    </div>
                    <div id="collapse1" class="panel-collapse collapse">
                        <div class="panel-body" id="formcreation">
                            <div class="row">
                                <div class="col-md-12 sch-box">
                                    <div class="col-md-6 form-group"><input type="time" class="form-control"
                                                                            value="00:00" id="sch-s-time"
                                                                            name="sch-s[]"></div>
                                    <div class="col-md-6 form-group"><input type="time" class="form-control"
                                                                            value="00:00" id="sch-e-time"
                                                                            name="sch-e[]"></div>
                                    <div class="col-md-12 form-group"><input type="text" class="form-control"
                                                                             placeholder="Enter Description"
                                                                             id="sch-title" name="sch-title[]"></div>
                                    <div class="col-md-12 form-group"><textarea id="sch-title1"
                                                                                class="form-control vresize"
                                                                                name="sch-title[]"></textarea></div>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn center-block panel-addbtn"><i class="fa fa-plus"></i></button>
                    </div>
                </div>
            </div>
        </div>
        <!--End panel-->
    </div>
</div>