2017-06-09 6 views
1

携帯電話で作業するために入力の種類に日付と時刻を入力するときに問題があります。私は携帯電話(ネイティブのものとJQueryのUI)の上でダブルピッキングツールを取得していると、それは私がフォームを完了させませんdatepickerは隠されないため。 JQuery UIピッカーがネイティブピッキングツールを備えた携帯端末に表示されないようにするにはどうすればよいですか? exampleモバイルでJquery UIのdatepicker/timepickerを表示しないようにする方法

これは私が持っているサンプルコードです:

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

あなたが欲しいですiPhoneのようなモバイルデバイスのときにdatepickerを抑制するには? 'if'文で十分でしょうか? – Twisty

答えて

0

あなたはinput type="date"を使用している、jQueryの-UI日付ピッカーは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(); 
    } 
}); 
+0

ありがとうミスター –

関連する問題