Search code examples
jqueryjquery-uitimepicker

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.


Solution

  • 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>