Question

我在互联网上搜索了很多并尝试了但是所有这些都没有用我的问题是如何显示时间选择器和日期选择器

我已经有了日期选择器的代码

<html>
<head>

<title>datetimepicker</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jqueryui.css"rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdn.jsdelivr.net/json2/0.1/json2.js"></script>
   </head>
   <body>
   <input class="w3-input   w3-border "  type="text" id="txt_fupdate" size="25" title="Follow Up Date" placeholder="Follow Up Date " runat="server" required>    
            <script type="text/javascript">
                $(function () {
                    $("#txt_fupdate").datepicker({ dateFormat: "dd-mm-yy" }).val()
                });

             </script>
   </body>
   </html>

我的问题是如何添加或更新该代码以获取时间选择器，请帮助解决此问题。

Answer 1

看一下这个插件：http://xdsoft.net/jqplugins/datetimepicker/

或者，我建议您可以在 datepicker 的右侧添加一个额外的文本框，并将其与this之类的时间选择器绑定。

Answer 2

如上所述，你需要一个插件，试试这个：https://plugins.jquery.com/simple-dtpicker/

请记住在文件夹中包含所需文件

jquery.simple-dtpicker.js和jquery.simple-dtpicker.css

你的代码看起来像这样：

<html>

<head>
        <title>datetimepicker</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
        <script src="https://cdn.rawgit.com/mugifly/jquery-simple-datetimepicker/72933bbe/jquery.simple-dtpicker.js"></script>
        <link href="https://cdn.rawgit.com/mugifly/jquery-simple-datetimepicker/72933bbe/jquery.simple-dtpicker.css" rel="stylesheet" />
    </head>

    <body>

        <input id="txt_fupdate" class="w3-input   w3-border " placeholder="Follow Up Date " required="" size="25" title="Follow Up Date" type="text" />
        <script type="text/javascript">
            $(function() {
                $('#txt_fupdate').appendDtpicker({
                    "closeOnSelected": true

                });


            });
        </script>

    </body>

    </html>

它简单，并具有几个很好的功能，如本地化。

如何添加时间选择器和日期选择器

2 个答案: