Question

我的JSP页面中有一个日期选择器。现在我想在这个datepicker中添加开始时间和结束时间，即日历。怎么做。我还想设置验证，开始时间应始终小于结束时间。我在JSP中的datepicker代码是

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>User_Interface</title>
    <link rel="stylesheet"       href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">

    <script>
        $(function() {
            $("#datepicker").datepicker({ minDate: -210, maxDate: -1 });
        });
    </script>
</head>

<b>Select Date to be compared</b><br>
<p>Date: <input type="text" name="datepicker" id="datepicker"></p>
<input type="submit" value="Submit"><br>

修改

现在，当我尝试使用此代码

时，我的datepicker即日历也无法正常工作

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>User_Interface</title>

        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css">
  
        <link type="text/css" href="css/bootstrap.min.css" />
        <link type="text/css" href="css/bootstrap-timepicker.min.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="js/bootstrap-2.2.2.min.js"></script>
        <script type="text/javascript" src="js/bootstrap-timepicker.min.js"></script>
  
        <script>
            $(function() {
                $("#datepicker").datepicker({ minDate: -210, maxDate: -1 });
            });

        </script>

        <script type="text/javascript">
            $('#timepicker2').timepicker({
                minuteStep: 1,
                template: 'modal',
                appendWidgetTo: 'body',
                showSeconds: true,
                showMeridian: false,
                defaultTime: false  
            });
        </script>
    </head>
    <body>
        <br>
        <br>
        <form>
            <b>Select Date to be compared</b><br>
            <p>Date: <input type="text" name="datepicker" id="datepicker"></p>

            <div class="input-append bootstrap-timepicker">
                <input id="timepicker2" type="text" class="input-small">
                <span class="add-on">
                    <i class="icon-time"></i>
                </span>
            </div>
            <input type="submit" value="Submit">
            <br>
        </form>

    </body>
</html>

任何人都可以帮助我。

Answer 1

更改为datetimepicker。周围有几个。

我使用this one。

Answer 2

您可以使用此Jquery Plugin，它会为您的输入元素添加时间选择器功能。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link type="text/css" href="css/bootstrap.min.css" />
        <link type="text/css" href="css/bootstrap-timepicker.min.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="js/bootstrap-2.2.2.min.js"></script>
        <script type="text/javascript" src="js/bootstrap-timepicker.min.js"></script>
    </head>
    <body>
        <div class="input-append bootstrap-timepicker">
            <input id="timepicker1" type="text" class="input-small">
            <span class="add-on"><i class="icon-time"></i></span>
        </div>

        <script type="text/javascript">
            $('#timepicker1').timepicker();
        </script>
    </body>
</html>

适合我。

希望这有帮助。

Answer 3

尝试改变输入标签中的类型 type="text" 到 type="datetime-local" 并开始相应地修改

如何使用javascript在jsp页面的Datepicker中添加Timepicker

3 个答案: