Question

我正在寻找新的日期时间选择器，看起来像android上的日期时间选择器。我在Google上搜索并找到了它。 https://nehakadam.github.io/AnyPicker/

但是我不知道它是如何工作的。我想做一个简单的例子。任何人都可以帮助我。

Answer 1

在演示文件夹的GitHub repository中有一些示例。

<!DOCTYPE html>
<html>
    <head>
        <title>Time - AnyPicker</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="msapplication-tap-highlight" content="no" />
        <style type="text/css">
            body {
                margin: 0px;
            }

            .input-cont {
                width: 300px;
                padding: 20px;
            }

            input {
                width: 200px;
                height: 30px;
                padding: 3px 10px;
                margin-bottom: 16px;
            }
        </style>
        <link rel="stylesheet" type="text/css" href="../src/anypicker-font.css" />
        <link rel="stylesheet" type="text/css" href="../src/anypicker.css" />
        <link rel="stylesheet" type="text/css" href="../src/anypicker-ios.css" />
        <link rel="stylesheet" type="text/css" href="../src/anypicker-android.css" />
        <link rel="stylesheet" type="text/css" href="../src/anypicker-windows.css" />
        <script type="text/javascript" src="vendors/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../src/anypicker.js"></script>
        <script type="text/javascript">
            $("#ip-android").AnyPicker(
                {
                    mode: "datetime",
                    dateTimeFormat: "hh:mm aa",

                    theme: "Android"
                });
            });
        </script>
    </head>
    <body>
        <table class="input-cont">
            <tr>
                <td>Time : (Android)</td>
            </tr>
            <tr>
                <td>
                    <input type="text" id="ip-android" readonly>
                </td>
            </tr>
        </table>
    </body>
</html>

如何在js / jQuery中制作“滑动div标签”

1 个答案: