选择 2 datepicker ，更改值

Question

我有 2 个日期选择器。

当我单击第二个日期选择器时。它将值更改为第一个日期选择器值

这里是html代码

 <div class="search-field-left search-field-mutli-city">
  <input type="hidden" name="search[no_legs]" id="search_no_legs" value="2">
    <ul class="" id="multi_leg_0">
      <li class="header number">1</li>
      <li>
        <div class="header">Från</div>
        <input type="text" name="search[legs][0][origin_text]" id="search_legs_0_origin_text" value="Köpenhamn (CPH), Danmark" class="field-1 airport_field ui-autocomplete-input" placeholder="Från" data-source="/autocomplete/origin/flight" data-id-element="#search_legs_0_origin_id" autocomplete="off">
        <input type="hidden" name="search[legs][0][origin_id]" id="search_legs_0_origin_id" value="6547676">
      </li>
      <li class="icon">
        <img class="right_left_arrow" data-number="0" src="http://res.cloudinary.com/dzwdseno3/image/asset/right_left_arrow-c0f7e54c0a61ac009de1b92fd2ff1a4f.png" alt="Right left arrow">
      </li>
      <li>
        <div class="header">Till</div>
        <input type="text" name="search[legs][0][destination_text]" id="search_legs_0_destination_text" value="London (LON), England" class="field-3 airport_field airport_field_destination ui-autocomplete-input" data-number="0" placeholder="Till" data-source="/autocomplete/destination/flight" data-id-element="#search_legs_0_destination_id" autocomplete="off">
        <input type="hidden" name="search[legs][0][destination_id]" id="search_legs_0_destination_id" value="6540382">
      </li>
      <li class="small_date">
        <div class="header">Resedatum</div>
        <input type="text" name="search[legs][0][date]" id="search_legs_0_date" value="2018-04-23" class="field-1 multi_datepicker" placeholder="Resedatum" readonly="readonly" data-number="0" data-mindate="2018-04-18" data-maxdate="2019-04-13" data-defaultdate="2018-04-23">
      </li>
    </ul>
    <ul class="" id="multi_leg_1">
      <li class="header number">2</li>
      <li>
        <div class="header">Från</div>
        <input type="text" name="search[legs][1][origin_text]" id="search_legs_1_origin_text" value="London (LON), England" class="field-1 airport_field ui-autocomplete-input" placeholder="Från" data-source="/autocomplete/origin/flight" data-id-element="#search_legs_1_origin_id" autocomplete="off">
        <input type="hidden" name="search[legs][1][origin_id]" id="search_legs_1_origin_id" value="6540382">
      </li>
      <li class="icon">
        <img class="right_left_arrow" data-number="1" src="http://res.cloudinary.com/dzwdseno3/image/asset/right_left_arrow-c0f7e54c0a61ac009de1b92fd2ff1a4f.png" alt="Right left arrow">
      </li>
      <li>
        <div class="header">Till</div>
        <input type="text" name="search[legs][1][destination_text]" id="search_legs_1_destination_text" value="Köpenhamn (CPH), Danmark" class="field-3 airport_field airport_field_destination ui-autocomplete-input" data-number="1" placeholder="Till" data-source="/autocomplete/destination/flight" data-id-element="#search_legs_1_destination_id" autocomplete="off">
        <input type="hidden" name="search[legs][1][destination_id]" id="search_legs_1_destination_id" value="6547676">
      </li>
      <li class="small_date">
        <div class="header">Resedatum</div>
        <input type="text" name="search[legs][1][date]" id="search_legs_1_date" value="2018-04-30" class="field-1 multi_datepicker" placeholder="Resedatum" readonly="readonly" data-number="1" data-mindate="2018-04-18" data-maxdate="2019-04-13" data-defaultdate="2018-04-30">
      </li>
    </ul>

</div>

当我单击第二个日期选择器时。它将值更改为第一个日期选择器值

这是这些日期选择器的代码

 function load_multicity() {
    $('.add_multi_leg').parent().off('click').on('click', add_multi_leg);
    $('.remove_multi_leg').parent().off('click').on('click', remove_multi_leg);
    $('.multi_datepicker').on('change', () => {
      var id = Number($(this).attr('data-number'))
      if (id < 10) {
        $(`#search_legs_${id}_date`).datepicker("option", "minDate", this.value)
      }
    });

    $('.airport_field_destination').on('autocompleteselect', (event, ui) => {
      var id = Number($(this).attr('data-number'))
      $(`#search_legs_${id + 1}_origin_text`).val(ui.item.value);
      $(`#search_legs_${id + 1}_origin_id`).val(ui.item.id)
    });

    $(".multi_datepicker").each((key, elem) => {
      const mindate_date = new Date($(elem).attr("data-mindate"));
      const maxdate_date = new Date($(elem).attr("data-maxdate"));
      const default_date = new Date($(elem).attr("data-defaultDate"));
      $(elem)
        .datepicker({
          language: gon.locale,
          minDate: mindate_date,
          maxDate: maxdate_date,
          autoClose: true,
          onShow: (inst, animationCompleted) => {
            if (animationCompleted) return true;

            var id = Number(inst.$el.attr("id").split("_")[2]);
            if (id < 0) return true;

            var previous = $(`#search_legs_${id - 1}_date`);
            if (previous.length == 0) return true;

            var date = new Date(previous.val());
            if (inst.currentDate < date) {
              // TODO: Does this even do something?
              inst.selectedDates = [date]; 
            }
            inst.update("minDate", date);
          },
          onSelect: (dateText, inst) => {
            // This updates all the next dates.
            var no_count = Number($("#search_no_legs").val());
            var p = $("#search_legs_0_date").val();
            for (let i = 1; i < no_count; i++) {
              var leg_id = `#search_legs_${i}_date`;
              if ($(leg_id).val() < p) {
                $(leg_id).val(p);
                $(leg_id).data('datepicker').selectDate(p);
              }
              p = $(leg_id).val();
            }
          }
        })
        .data("datepicker")
        .selectDate(default_date);
    });
  }

例如，我在第一个日期选择器 2018-04-23 中，然后单击第二个，即 2018-04-30 的位置，并将值更改为第一个，因此它变为 2018-04-23 。

哪里有问题？

Answer 1

在'onSelect'函数中，你有一行：

var p = $("#search_legs_0_date").val();

它指的是第一个日期选择器。在某些情况下，您会将日期选择器更新为 p。你实际上并没有告诉你期望你的代码有什么行为，所以很难告诉你如何修复你的代码。