Comment empêcher l'affichage de l'interface utilisateur de Jquery datepicker/timepicker sur le mobile

Question

J'ai des difficultés à obtenir des entrées pour la date et l'heure sur les mobiles. Je reçois des outils de double sélection sur les mobiles (le natif et l'interface utilisateur JQuery) et il ne me permettra pas de remplir le formulaire, car datepicker ne se cache pas. Comment puis-je empêcher l'affichage du sélecteur d'interface utilisateur JQuery sur les mobiles dotés d'un outil de sélection natif?

C'est l'exemple de code je:

<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> 

Answer 1

Vous utilisez un input type="date", Le Datepicker jQuery-UI utilise un input type="text":

De l'jQuery-UI Datepicker Documentation:

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

De cette façon, vous pouvez éviter les outils de prélèvement double.

Si vous devez supprimer la Datepicker jQuery-UI sur les appareils mobiles, vous pouvez utiliser l'une des techniques de détection des périphériques mobiles décrits ici: What is the best way to detect a mobile device in jQuery? et basculer le input type, comme ceci:

$(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(); 
    } 
});