Skip to content

All topics  /  Bootstrap

How To use Bootstrap Timepickar Example Code ?

Bootstrap ·

How To use Bootstrap Timepickar Example Code ?

Hi Guys,

I this tutorial,i give you how to create timepicker in your application.In this example to you can set bootstrap timepicker using datetimepicker library example code.I use datetimepicker library for timepicker that way you can also set datepicker too.bootstrap datetimepicker is very popular library. So if you also want to build date and timepicker both then also you can set you can see bellow example.

Here set format "HH:mm:ss" but you can also add your custom format like "HH:mm" etc

Bootstrap Timepickar Example


<html lang="en">
<head>
    <title>Bootstrap Timepicker Example</title>  
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>  
</head>
<body>
<div class="container" style="margin-top: 20px">
    <div class="col-md-8 col-md-offset-2">
        <h2 class="text-center">Bootstrap Timepicker Example - nicesnippets.com</h2>
        <div class="form-group" style="margin-top: 30px">
            <label>Time</label>
            <input class="form-control" type="text" id="time" placeholder="hh:mm:ss" />
        </div>
    </div>
</div>
<script>
    $('#time').datetimepicker({
        format: 'hh:mm:ss',
    });
</script>
</body>
</html>

it will help you....

More on this topic