時間のモバイルUI

私はdatetimepickerを使用してフォームに時間を入力しています。 UIはコンピュータ上でうまく動作しますが、モバイル環境ではうまく動作しません。私は期間を記録するためにすべてのプラットフォームでうまく機能する良い選択肢を見つけることができませんでした。時間のモバイルUI

のDateTimePicker

<div class="col-sm-6"> 
<div class="form-group"> 
    <div class="input-group date" id="datetimepicker1"> 
     <input type="text" class="form-control"> <span class="input-group-addon"> 
        <span class="glyphicon glyphicon-calendar"></span> 

$(function(){ 
$('#datetimepicker1').datetimepicker({ 
format: 'hh:mm:ss' 
}); 

});

そしてフィドル例の相続人例：http://jsfiddle.net/jagtx65n/

はまだ効果的に動作するモバイルで異なるUIを強制することが可能であり、またはより良い方法がありますこれを行う？

出典

2016-04-16 Shauno

私はコードバプロジェクトで次の日時ピッカーを使用しました。

Responsive jQuery DateTime Picker library for Web & Mobile

それは以下の通りである。このプラグインを使用して、私の携帯view.AのサンプルHTMLコードでは非常に良く見えます。

<!DOCTYPE html> 
<!-- 
To change this license header, choose License Headers in Project Properties. 
To change this template file, choose Tools | Templates 
and open the template in the editor. 
--> 
<html> 
    <head> 
     <title>TODO supply a title</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link href="css/DateTimePicker.min.css" type="text/css" rel="stylesheet" /> 
     <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> 
     <script src="js/DateTimePicker.min.js"></script> 
     <script> 
      $(document).ready(function() 
      { 
       $("#dtBox").DateTimePicker({ 
        "timeFormat": "hh:mm:ss AA" 
       }); 

      }); 
     </script> 
    </head> 
    <body> 
     <div><p>Time : </p> 
      <input type="text" data-field="time" readonly> 
      <div id="dtBox"></div> 
     </div> 

    </body> 
</html>

出典

2016-04-17 07:54:37

ありがとう@Kiran Muraleeはうまく見えますが、実際にはこれを使用して日付の時刻ではなく時間を入力しています。また、hh：mm：ss（この場合は秒が重要です）にする必要があります。 – Shauno

あなたが必要とするものは本当にプラグインで可能です。ちょうど "timeFormat"を使用してください： "hh：mm：ss AA"。http://curioussolutions.github.io/DateTimePicker/.I私の答えを編集しました。プラグインを使用してサンプルのhtmlコードを含める –

答えて

関連する問題