獲得整數值，併產生輸入動態

我想動態獲取輸入時，從「結束日期」輸入焦點並通過天數到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>

來源

2017-02-17 Jamal Ahmad

除了jQuery，這個問題類似於[你已經問過，並且從未回覆過]（http://stackoverflow.com/questions/42118123/get-integer-value-from-input-and-create-引導面板逐NG-重複）。對於這個新問題，具體哪些不起作用？選擇日期時， – ZimSystem

我想動態獲取面板panels..thats數當從「日期」輸入焦點並經過的天數jQuery和生成它。我嘗試這種代碼，但是從天不工作中獲得價值，併產生panels..thats數它

我稍微改變，從集中點擊事件並將輸入格式化爲按鈕。你可能總是改變回來。您所遇到的問題是：

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

元素與一流IT-右側是不是最近的元素。正確的方法是：

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

它是最接近的col-md-2元素的兄弟。

此外，我在之前添加了空白以填充面板組。

如果您需要選擇日期變更時，裏面這條線來自動創建面板「$ from.add（$到）.change（函數（）{」：

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

來源

2017-02-17 14:04:45 gaetanoM

仍未自動創建面板。 –

@JamalAhmad對不起。代碼段和答案已更新。現在，只要您點擊日期按鈕或選擇兩個日期，js就會創建面板。參考：$（'＃days'）。attr（'value'，days）.trigger（'click'）;讓我知道。 – gaetanoM

非常感謝..它完美的作品 –

獲得整數值，併產生輸入動態

回答

相關問題