从Input获取整数值并动态生成输入

时间：2017-02-17 12:51:41

标签： javascript jquery twitter-bootstrap

我希望在从“结束日期”输入焦点时动态获取输入，并将天数传递给JQuery并生成它。我试过这段代码但不是工作的 从天获得价值并生成数量的面板..它

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

1 个答案:

答案 0 :(得分：2)

  

我希望在从“日期”输入聚焦时动态获取Panels并将天数传递给JQuery并生成它。我试过这段代码但是没有工作从天获取价值并生成数量的面板..它< / p>

我从焦点稍微改为点击事件，并将输入格式化为按钮。你可能总是改回来。 您遇到的问题是：

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

具有类右侧的元素不是最接近的元素。正确的方法是：

$(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>

相关问题
最新问题