我使用日期时间选择器在表单中输入持续时间。UI在计算机上运行良好,但在移动环境中运行不佳。我还没能找到一个好的替代方案,在所有平台上都能很好地记录持续时间。
以下是日期时间选择器的示例
<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吗?或者有更好的方法吗?
我在cordova项目中使用了以下日期时间选择器。
用于Web的响应式jQuery日期时间选取器库&移动
在我的手机视图中,它看起来非常好。下面给出了使用该插件的示例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>