持续时间的移动UI

Mobile UI for time duration

本文关键字：UI 移动 持续时间      更新时间：2023-09-26

我使用日期时间选择器在表单中输入持续时间。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>
相关文章：