javascript - 如何在每次单击按钮时将创建的id添加到datepicker()

我想创建一行具有唯一ID的输入，每次单击添加另一个排期即会创建它们，例如destina.us中的下图。
并通过单击删除图标将其删除。我如何将创建的ID添加到与Jquery UI datepicker相关的代码中，直到输入日历正常工作？

                         <div id="multiple">
             <div class="calendar-container">
              <div class="form-group col-sm-4 location-icon">
              <input type="text" class="form-control" placeholder="origin" />
           </div>
           <div class="form-group col-sm-4 location-icon destination-city">
             <input type="text" class="form-control " placeholder="destination" />
          </div>
             <div class="form-group col-sm-4 calendar">
            <input type="text" class="form-control" placeholder="start day" id="date_start_multiple" />
        </div>
          </div>
           <div class="calendar-container">
         <div class="form-group col-sm-4 location-icon">
            <input type="text" class="form-control" placeholder="origin" />
        </div>
        <div class="form-group col-sm-4 location-icon destination-city">
            <input type="text" class="form-control " placeholder="Destination" />
        </div>
        <div class="form-group col-sm-4 calendar">
            <input type="text" class="form-control" placeholder="start Day" id="date_start2_multiple" />
        </div>
    </div>

    <div class="row">
        <span class="add-flight colorOrange add-anther-flight"><i class="fa fa-plus ml5"></i><span>add another flight</span></span>
    </div>

                 $(document).ready(function () {
                   $('.add-anther-flight').click(function () {
                    addFlight();
                    });
        var i = 1;
        function addFlight() {
            $('#multiple').append(
               "<div class='flight'>" +
           "<div class='calendar-container'>" +
               "<div class='form-group col-sm-4 location-icon'>" +
                   "<input type='text' class='form-control' placeholder='origin' />" +
              "</div>" +
               "<div class='form-group col-sm-4 location-icon destination-city'>" +
                   "<input type='text' class='form-control' placeholder='destination' />" +
               "</div>" +
               "<div class='form-group col-sm-4 calendar calendar2'>" +
                   '<input type="text" class="form-control persianNumber" placeholder="start day" id="date_start_multiple-' + i + '"/>' +
               "</div>" +
              "</div>" +
      "</div>");
            i++;
        }

            $("date_start_multiple,date_start2_multiple").datepicker({
                dateFormat: "yy-mm-dd",
                minDate: 0,
                onSelect: function (date) {
                    var date2 = $('#date_start').datepicker('getDate');
                    date2.setDate(date2.getDate() + 1);
                    $('#date_finish').datepicker('setDate', date2);
                    //sets minDate to dt1 date + 1
                    $('#date_finish').datepicker('option', 'minDate',date2);
                }

        });
    });

http://destinia.us/#_ga=1.109031490.1172383090.1484504028

最佳答案

JSFiddle上的代码有一些更新

因此，首先我要添加功能，在其中您将带有日期选择器的块容器和用于删除该块的按钮发送给容器：

function initializeClicks($element) {
        $element.find(".datepicker").datepicker({
            dateFormat: "yy-mm-dd",
            minDate: 0,
            onSelect: function(date) {
                var date2 = $('#date_start').datepicker('getDate');
                date2.setDate(date2.getDate() + 1);
                $('#date_finish').datepicker('setDate', date2);
                //sets minDate to dt1 date + 1
                $('#date_finish').datepicker('option', 'minDate', date2);
            }
        });

        $element.find(".remove-block").click(function() {
            $(this).parent().remove();
        });
    }

如您所见，我在每个日期选择器输入中都添加了类，以方便初始化。
另外，要为日期选择器生成ID，您可以只使用块数并将其递增1

var index = $(".block").length + 1;

希望对您有所帮助。