Question

我想创建一行具有唯一ID的输入，每次点击添加另一个航班时都会创建它们。如下图所示在destina.us中。它被删除了点击删除icon.how我可以将创建的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

上的代码有一些更新

所以，首先我添加函数，你发送带有datepicker的块容器和删除该块的按钮：

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;

我希望这对你有所帮助。

如何在每次点击按钮时将创建的id添加到datepicker（）

1 个答案: