如何防止在移动设备上显示 Jquery UI datepicker/timepicker

Posted 2023-05-08

【中文标题】如何防止在移动设备上显示 Jquery UI datepicker/timepicker

【英文标题】：How to prevent showing Jquery UI datepicker/timepicker on mobile

【发布时间】：2017-11-10 21:21:11

【问题描述】：

我无法获取在手机上工作的输入类型日期和时间。我在手机（本机和 JQuery UI）上获得了双重选择工具，它不会让我完成表格，因为 datepicker 不会隐藏。如何防止 JQuery UI 选择器显示在具有本机选择工具的手机上？

这是我的示例代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="css\jquery-ui.min.css">
<script src="js\jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js"></script>

<form class="form-horizontal" method="post" action="seleccionar_detalles.php">
    <div>
        <input type="date" id="lala" classs="fecha1" name="lala">
        <input type="time" placeholder="Salida" id="salida" name="Fecha_de_salida[]" />

    </div>
    <div class="form-group col-xs-24">
        <div class="col-xs-6 pull-right">
            <button type="submit" class="btn btn-siguiente">Submit</button>
        </div>
    </div>
</form>

<script>
    $('#salida').timepicker();
    $( ".fecha1" ).datepicker();
</script>

【问题讨论】：

所以当它是一个移动设备时，你想抑制 datepicker，比如 iPhone？ if 声明就足够了吗？

【参考方案1】：

你使用的是input type="date"，jQuery-UI Datepicker 使用的是input type="text"：

来自jQuery-UI Datepicker Documentation：

<p>Date: <input type="text" id="datepicker"></p>

这样可以避免双重拾取工具。

如果您需要在移动设备上抑制 jQuery-UI Datepicker，您可以使用此处描述的移动设备检测技术之一：What is the best way to detect a mobile device in jQuery? 并切换 input type，如下所示：

$(document).ready(function() 
  var isMobile = ....
  // html 5 input types: date, datetime, datetime-local, month, time, week
  if(!isMobile) 
    $('input[type="date"]').each(function() 
      $(this).attr("type", "text");
    );
    $('input[type="time"]').each(function() 
      $(this).attr("type", "text");
    );
    $("#salida").timepicker();
    $("#lala").datepicker();
  
);