[英]How to prevent showing Jquery UI datepicker/timepicker on mobile
我很難獲得輸入類型的日期和時間在手機上工作。 我正在移動設備(原生設備和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>
您正在使用input type="date"
,jQuery-UI Datepicker使用input type="text"
:
<p>Date: <input type="text" id="datepicker"></p>
這樣您就可以避免使用雙重拾取工具。
如果您需要在移動設備上禁止jQuery-UI Datepicker,您可以使用此處描述的移動設備檢測技術之一: 在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();
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.