jquery - How to add Timepicker in a Datepicker in jsp page using javascript

I have a date picker in my JSP page. Now I want to add start time and end time with in this datepicker i.e calender. How to do that. I also want to set validation that start time should always be less than the end time. My code for datepicker in JSP is

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>User_Interface</title>
    <link rel="stylesheet"       href="//code.jquery/ui/1.11.2/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery/jquery-1.10.2.js"></script>
    <script src="//code.jquery/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 pared</b><br>
<p>Date: <input type="text" name="datepicker" id="datepicker"></p>
<input type="submit" value="Submit"><br>

EDIT

Now my datepicker i.e. calender is also not working when I tried with this code

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>User_Interface</title>

        <link rel="stylesheet" href="//code.jquery/ui/1.11.2/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery/jquery-1.10.2.js"></script>
        <script src="//code.jquery/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=".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 pared</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>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>User_Interface</title>
    <link rel="stylesheet"       href="//code.jquery./ui/1.11.2/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery./jquery-1.10.2.js"></script>
    <script src="//code.jquery./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 pared</b><br>
<p>Date: <input type="text" name="datepicker" id="datepicker"></p>
<input type="submit" value="Submit"><br>

EDIT

Now my datepicker i.e. calender is also not working when I tried with this code

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>User_Interface</title>

        <link rel="stylesheet" href="//code.jquery./ui/1.11.2/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery./jquery-1.10.2.js"></script>
        <script src="//code.jquery./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./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 pared</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>

Can anyone please help me with this.

Share Improve this question edited May 25, 2017 at 13:47 Mantas Čekanauskas 2,2386 gold badges26 silver badges48 bronze badges asked Feb 25, 2015 at 11:56 tiddi rastogi 5263 gold badges10 silver badges33 bronze badges

Let us continue this discussion in chat. – tiddi rastogi Commented Feb 25, 2015 at 13:25
Java is to Javascript as elect is to electronic – leigero Commented Feb 25, 2015 at 13:39

Add a ment |

3 Answers 3

Sorted by: Reset to default 1

try by changing the type in input tag from type="text" to type="datetime-local" and start modifying accordingly

Change to a datetimepicker. There are several around.

I use this one.

You can use this Jquery Plugin which will add timepicker functionality to your input elements.

<!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./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>

Works for me.

Hope this helps.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

jquery - How to add Timepicker in a Datepicker in jsp page using javascript - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)