md-time-picker/test.html

TODO

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="mdtimepicker.css">
<style type="text/css">
</style>
<h2>Demo</h2>
<div class="container">
    <div class="row">
        <div class="col">
            <p>24-hour format</p><input type="text" value="00:00" id="picker1"></div>
        <div class="col">
            <p>12-hour format with AM/PM indicator</p><input type="text" value="12:00 AM" id="picker2"></div>
    </div>
</div>
<br>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="mdtimepicker.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
        $('#picker1').mdtimepicker({ format: 'hh:mm' }).data('mdtimepicker');
        
        $('#picker2').mdtimepicker({ readOnly: false, hourPadding: true, is24Hour: false, theme: 'dark', color: 'red' })
            .on('timechanged', function (e) {
                alert(e.time);
                alert(e.value);
        });
    });
</script>