CODEWITHSUNDEEP
jqueryjquery-uitimepicker
Markus Werner
Markus Werner

Reputation: 109

Timepicker from jquery using datetimepicker

how can i do the textbox of timepicker with 24 hours time as "00:00" -> "23:59"? How can i do using jquery custom (full widgets and others) created on jquery ui website? Thanks M.W.

Upvotes: 0

Views: 3430

Answers (1)

Vicky Dev
Vicky Dev

Reputation: 2173

For timepicker script in jquery, check below links:

https://github.com/jonthornton/jquery-timepicker

https://github.com/trentrichardson/jQuery-Timepicker-Addon

These plugins have settings to turn on the 24-hour mode.

As an example for jquery-timepicker see below, it's working with minimal js code and gives 24 hour format:

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.timepicker.css" />

  <script type="text/javascript" src="lib/bootstrap-datepicker.js"></script>
  <link rel="stylesheet" type="text/css" href="lib/bootstrap-datepicker.css" />

  <script type="text/javascript" src="lib/site.js"></script>
  <link rel="stylesheet" type="text/css" href="lib/site.css" />
<script src="jquery.timepicker.min.js"></script>

</head>

<body>

<input type="text" class="timepicker1" />
<script>
$(document).ready(function() {
    $('.timepicker1').timepicker({
        'showDuration': true,
        'timeFormat': 'H:i:s'
    });
 });
</script>
</body>
</html>

Upvotes: 1

Related Questions