Question

我的jquery datepicker和ios有一个小问题。

单击输入字段时，datepicker将按预期显示。但是当点击背景（没有选择日期）时，日期选择器应该隐藏。这适用于桌面，但不适用于我测试的所有ios divices。可以在此pen

上找到示例设置

<div id="test">
    <form class="booking-form" action="#" method="POST">
        <input type="text" id="check_in_date" name="check_in_date" placeholder="Check-in-date">
        <input type="text" id="check_out_date" name="check_out_date" placeholder="Check-out-date">
        <input class="bookbutton" name="booking_step_1_submit" type="submit" value="Check Availability" />
</form>
</div>

    $("#check_in_date").attr('readonly', true);
        $("#check_out_date").attr('readonly', true);

        var array_1 = ["2015-01-24","2015-01-26","2015-01-27", "2015-01-28"];

        $( "#check_in_date" ).datepicker({
              minDate: 0,
              maxDate: "+1y",
              changeMonth: true,
              numberOfMonths: 1,
              dateFormat: "yy-mm-dd",
              beforeShowDay: function(date){
                var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                return [ array_1.indexOf(string) == -1 ]
              },
              onClose: function( selectedDate ) {
                  if (selectedDate) {
                    $( "#check_out_date" ).datepicker( "option", "minDate", selectedDate );

                  }
              }

            });
        $( "#check_out_date" ).datepicker({
              minDate: 0,
              maxDate: "+1y",
              changeMonth: true,
              numberOfMonths: 1,
              dateFormat: "yy-mm-dd",
              beforeShowDay: function(date){
                var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                return [ array_1.indexOf(string) == -1 ]
              },
              onClose: function( selectedDate ) {
                  if (selectedDate) {
                $( "#check_in_date ").datepicker( "option", "maxDate", selectedDate);

                  }
              }

            });

我想知道是否有解决方法。

由于

Answer 1

我知道这个回复有点迟了，但我在iPhone上测试时遇到了同样的问题。我想这可能是一个长期的jquery ui bug。

查看详细说明问题的此票证： http://bugs.jqueryui.com/ticket/9308

此页面详细说明了根本原因和可能的解决方法： https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile

Safari Mobile 7.0+（也可能是早期版本）受到影响   不通常不会触发单击事件的错误   交互式（例如），也没有事件监听器   直接附加到元素本身（即事件委托是   正在使用）。有关演示，请参阅此实例。也可以看看   Safari关于使元素可点击的文档和定义   “可点击的元素”。

此错误的已知解决方法：



在元素或其任何祖先上设置cursor: pointer;。



为元素或其任何祖先添加虚拟onclick=""属性，但不包括<body>。



使用典型的互动元素（例如<a>）而不是通常不互动的元素（例如<div>）。



停止使用点击事件委派。

当点击背景时，jquery datepicker没有隐藏在ios上

1 个答案: