持续时间的移动 UI答案

【问题标题】：Mobile UI for time duration持续时间的移动 UI
【发布时间】：2016-08-08 12:01:02
【问题描述】：

我正在使用 datetimepicker 在表单中输入持续时间。 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，但仍然有效，或者有更好的方法来做到这一点？

【问题讨论】：

标签： javascript jquery datetimepicker

【解决方案1】：

我在我的 cordova 项目中使用了以下日期时间选择器。

Responsive jQuery DateTime Picker library for Web & Mobile

在我的移动视图中看起来非常好。下面给出了使用此插件的示例 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>

【讨论】：

感谢@Kiran Muralee，看起来不错，但我实际上是在使用它来输入时间段而不是日期时间。我还需要它在 hh:mm:ss 中（在这种情况下秒很重要）。
使用插件可以实现您真正需要的。只需使用“timeFormat”：“hh:mm:ss AA”。有关更多详细信息，请参阅此链接curioussolutions.github.io/DateTimePicker/.I 已编辑我的答案以包含示例使用插件的html代码。