jQuery / Неисправность пользовательского интерфейса в iOS / Safari (автозаполнение, средство выбора даты) - PullRequest
0 голосов
/ 08 января 2020

Помещение

Мне было поручено создать систему бронирования для транспортной компании. Вопреки моему совету, они хотели запустить sh в производство до того, как он будет готов, поскольку наступают праздники.

Хотя он работает на ОС Android / Windows, ipad / iphone / macs не работает загрузить его правильно .

У меня нет продукта Apple, и консоль не выдает ошибок, поэтому пошаговое тестирование является излишним.

Информация о коде

jQuery - 3.4.1, jQuery UI - 1.12.1, jQuery безконфликтный режим, запущенный на Wordpress

Код можно увидеть здесь: https://and-flor.ro

A PO C, закомментированная версия (без стиля, извините): https://jsfiddle.net/1mq8z9n4/7/

Образец HTML

<input type="text" id="departure" placeholder="Departure location">
<input type="text" id="destination" placeholder="Destination">
<input type="text" id="d-date" placeholder="Departure date">
<input type="text" id="r-date" placeholder="Return date">
<input type="checkbox" id="return-check" >
<span class="checkmark"></span> Two-way?

И сам код JS здесь

jQuery(document).ready(function($) {

  // Defining the total locations in one variable
  var src = [
    "(loc) lone",
    "(loc) ltwo",
    "(loc) lthree",
    "(int) ione",
    "(int) itwo",
    "(int) ithree"
  ];

  // Defining departure location 
  // This point decides if the departure is from local station or a international one.


  $("#departure").autocomplete({
    source: function(request, response) {
      var results = $.ui.autocomplete.filter(src, request.term);
      response(results.slice(0, 4));
    },
    change: function(event, ui) {
      if (!ui.item) {
        $(event.target).val("");
      }
    },
    focus: function(event, ui) {
      return false;
    }
  });


  // Depending on the start of string local -> (loc) or international -> (int),
  // the selected value of #departure dictates if #arrival loads either
  // loads international or national array (defined bellow)

  var loconly = [
    "(loc) lone",
    "(loc) ltwo",
    "(loc) lthree"
  ];

  var international = [
    "(int) ione",
    "(int) itwo",
    "(int) ithree"
  ];

  // Disabling two-way ticket (return date) date by default
  $("#r-date").prop('disabled', true);

  // Adding the return checkbox functionality

  $("#return-check").click(function() {
    if ($(this).prop("checked") == true) {
      $('#r-date').prop("disabled", false);
    } else if ($(this).prop("checked") == false) {
      $('#r-date').prop("disabled", true);
    }
  });




  // LOCATION CONDITIONAL

  // Datepickers logic
  // From local to international: Tue Thur Fri Sat
  // From international to local: Mon Tue Thur Sat Sun



  $('#departure').change(function() {

    // If we find (loc) in the selected string we generate
    // a datepicker with departure date (#d-date) and
    // return date (#r-date) 



    if ($(this).val().indexOf("\(loc\)") != -1) {

      $("#d-date").datepicker({
        minDate: 0,
        dateFormat: "dd/mm/yy",
        beforeShowDay: function(d) {
          var day = d.getDay();
          return [(day != 0 && day != 1 && day != 3)];
        },

        onSelect: function(dt, inst) {
          var date2 = $('#d-date').datepicker('getDate');
          date2.setDate(date2.getDate() + 1);

          $("#r-date").datepicker({
            dateFormat: "dd/mm/yy",
            minDate: date2,
            beforeShowDay: function(d) {
              var day = d.getDay();
              return [(day != 3 && day != 5)];
            }
          });

        }

      });

      // Setting destionation to filter just through international


      $("#destination").autocomplete({
        source: function(request, response) {
          var results = $.ui.autocomplete.filter(international, request.term);
          response(results.slice(0, 4));
        },
        change: function(event, ui) {
          if (!ui.item) {
            $(event.target).val("");
          }
        },
        focus: function(event, ui) {
          return false;
        }



      });

    }

    // If we don't find (loc) in the selected string
    else {


      $("#d-date").datepicker({
        minDate: 0,
        dateFormat: "dd/mm/yy",
        beforeShowDay: function(d) {
          var day = d.getDay();
          return [(day != 3 && day != 5)];
        },

        onSelect: function(dt, inst) {
          var date2 = $('#d-date').datepicker('getDate');
          date2.setDate(date2.getDate() + 1);

          $("#dretur").datepicker({
            dateFormat: "dd/mm/yy",
            minDate: date2,
            beforeShowDay: function(d) {
              var day = d.getDay();
              return [(day != 0 && day != 1 && day != 3)];
            }
          });

        }

      });


      $("#destination").autocomplete({
        source: function(request, response) {
          var results = $.ui.autocomplete.filter(loconly, request.term);
          response(results.slice(0, 4));
        },
        change: function(event, ui) {
          if (!ui.item) {
            $(event.target).val("");
          }
        },
        focus: function(event, ui) {
          return false;
        }



      });

    }
  });


});

Любая помощь будет принята с благодарностью, так как она уже находится в производстве и, кроме очевидных недостатков, таких как проверка, я не могу понять где проблема имеет место, и у меня нет устройств для проверки теорий. Спасибо.

...