CODEWITHSUNDEEP
javascriptjqueryjquery-uidatepicker
Elham Bagheri
Elham Bagheri

Reputation: 335

how can add a created id to datepicker() with every click on button

I want to create a row of some inputs with unique id that they are created with every click on add another flight.like the image below in destina.us. and It was removed with on click on remove icon.how I can add the created id to the codes related to Jquery UI datepicker until the calendar of inputs work correctly? enter image description here

                         <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

Upvotes: 0

Views: 1259

Answers (1)

Nedim Hozić
Nedim Hozić

Reputation: 1901

There is some update of your code on JSFiddle

So, first of all i'm add function where you send block container with datepicker and button for remove that block:

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

As you can see i'm added class on every date-picker input for easy initialization. Also, for generate id for datepicker, you can just use number of blocks and increment them for one

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

I hope that this helped you.

Upvotes: 1

Related Questions