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

Question

我想创建一行具有唯一 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

Answer 1

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();
        });
    }

如您所见，我在每个日期选择器输入上都添加了类，以便于初始化。 此外，要为 datepicker 生成 id，您可以只使用块数并将它们递增一个

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

希望对你有所帮助。