So fügen Timepicker in einen Datepicker in jsp-Seite mit javascript

Habe ich ein date-picker in meinem JSP Seite. Jetzt möchte ich hinzufügen, dass start-und Endzeit, die in diesem datepicker-ich.e-Kalander. Wie das zu tun. Ich will auch set-Validierung, die Startzeit sollte immer kleiner sein als die Endzeit. Mein code für datepicker in JSP ist

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

BEARBEITEN

Nun meine datepicker d.h. der Kalender wird auch nicht funktionieren, wenn ich habe versucht mit diesem code

JS:

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

Kann jemand mir bitte helfen mit diesem.

Schreibe einen Kommentar