Добавление нового поля ввода даты при нажатии кнопки

У меня есть кнопка, которая добавляет новое поле ввода даты бутстрапа при нажатии кнопки добавления.Добавление нового поля ввода даты при нажатии кнопки

Проблема, с которой я столкнулся, - это когда добавлено новое поле ввода даты загрузки, это не позволяет мне выбирать дату, а размер нового поля ввода даты загрузки бутстрапа не совпадает с первое поле ввода

$(document).ready(function() { 
    var counter = 2; 
    $("#addBtn").click(function() { 
    var newRowDiv = $(document.createElement('div')).attr("class", 'row'); 
    var newStartDateLabel = $(document.createElement('div')).attr("class", 'col-md-2'); 
    var newStartDateInput = $(document.createElement('div')).attr("class", 'col-md-2', 'input-group', 'input-daterange'); 

    newStartDateLabel.appendTo(newRowDiv); 
    newStartDateLabel.after().html("Start Date " + counter); 
    newStartDateInput.insertAfter(newStartDateLabel).html('<input "id="startDate"' + counter + 'name="startDate' + counter + 'type="text class="form-control" >'); 
    newRowDiv.appendTo(".container"); 
    counter++; 
    }); 
});

<body> 
    <form id="form" name="form" action="DateServlet" method="POST"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-md-2"> 
      Start Date 1 
     </div> 
     <div class="col-md-2 input-group input-daterange"> 
      <input id="startDate1" name="startDate1" type="text" class="form-control"> 
     </div> 
     </div> 
    </div> 
    <button id="addBtn" type="button" class="btn btn-default">Add</button> 
    </form> 
    <script type="text/javascript"> 
    $('.input-daterange input').each(function() { 
     $(this).datepicker("clearDates"); 
    }); 
    </script> 
</body>

источник

2016-12-20 user3429531

Вы можете форматировать свой код, пожалуйста? – Alexis

Пожалуйста, смотрите ниже код. В частности внесены изменения в:

var newStartDateInput = $(document.createElement('div')) 
        .attr("class", 'col-md-2 input-group input-daterange');

var dateText = $('<input id="startDate' + counter + '" name="startDate' + counter + '" type="text" class="form-control" >'); 
newStartDateInput.insertAfter(newStartDateLabel).html(dateText); 
dateText.datepicker(); //initializing the datepicker on newly added text field

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css"> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script> 
 
    <script type="text/javascript" src="js/addInput.js" charset="UTF-8"></script> 
 
    <script> 
 
    $(document) 
 
     .ready(
 
     function() { 
 
      var counter = 2; 
 
      $("#addBtn") 
 
      .click(
 
       function() { 
 
       var newRowDiv = $(
 
        document 
 
        .createElement('div')) 
 
        .attr("class", 'row'); 
 

 
       var newStartDateLabel = $(
 
        document 
 
        .createElement('div')) 
 
        .attr("class", 'col-md-2'); 
 

 
       var newStartDateInput = $(
 
        document 
 
        .createElement('div')) 
 
        .attr("class", 'col-md-2 input-group input-daterange'); 
 

 
       newStartDateLabel 
 
        .appendTo(newRowDiv); 
 

 
       newStartDateLabel.after().html(
 
        "Start Date " + counter); 
 

 
       var dateText = $('<input id="startDate' + counter + '" name="startDate' + counter + '" type="text" class="form-control" >'); 
 
       newStartDateInput 
 
        .insertAfter(
 
        newStartDateLabel) 
 
        .html(dateText); 
 

 
       dateText.datepicker(); //initializing the datepicker on newly added text field 
 

 
       newRowDiv.appendTo(".container"); 
 

 
       counter++; 
 
       }); 
 
     }); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <form id="form" name="form" action="DateServlet" method="POST"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-md-2"> 
 
      Start Date 1 
 
     </div> 
 
     <div class="col-md-2 input-group input-daterange"> 
 
      <input id="startDate1" name="startDate1" type="text" class="form-control"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <button id="addBtn" type="button" class="btn btn-default">Add</button> 
 
    </form> 
 

 
    <script type="text/javascript"> 
 
    $('.input-daterange input').each(function() { 
 
     $(this).datepicker("clearDates"); 
 
    }); 
 
    </script> 
 
</body> 
 

 
</html>

источник

2016-12-20 08:03:31 vijayP

Добавление нового поля ввода даты при нажатии кнопки

ответ

Смежные вопросы