am_pm_submit.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ClockPicker</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="dist/bootstrap-clockpicker.min.css">

<style type="text/css">
  body  {
    padding: 100px;
  }
</style>

</head>
<body>

  <input id="timepicker" type="text" name="timepicker" value="">


  <script type="text/javascript" src="assets/js/jquery.min.js"></script>
  <script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="dist/jquery-clockpicker.js"></script>

  <script type="text/javascript">

  $('#timepicker').clockpicker({
    autoclose: true,
    twelvehour: true,
    minutestep: 15,
    ampmSubmit: true
  });

  </script>
</body>
</html>