Question

我使用datetimepicker在表单中输入一段时间。用户界面在计算机上运行良好，但在移动环境中运行效果不佳。我还没有找到一个适合所有平台的良好替代方案来记录持续时间。

以下是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/

是否可以在移动设备中强制使用仍然有效的用户界面，或者有更好的方法吗？

Answer 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>

移动用户界面的持续时间

1 个答案: