'jquery timepicker time format

I want to make timepicker. I have some codes but my javascript code doesnt allow to write time like 16:46. When I want to write this. my time looks like 13:46. When I write second piece bigger than 2, Its always seem like 3. What should I do?

Here is my code:

(function($) {

$('*[data-timepicker]').attr('autocomplete','off').keydown(function(e){

// Input Value var
var inputValue = $(this).val();

// Make sure keypress value is a Number
if( (e.keyCode > 47 && e.keyCode < 58) || e.keyCode == 8){

  // Make sure first value is not greater than 2
  if(inputValue.length == 0){
    if(e.keyCode > 49){
      e.preventDefault();
      $(this).val(2);
    }
  }

  // Make sure second value is not greater than 4
  else if(inputValue.length == 1 && e.keyCode != 8){
    e.preventDefault();
    if( e.keyCode > 50 ){
      $(this).val(inputValue + '3:');
    }
    else{
      $(this).val(inputValue + String.fromCharCode(e.keyCode) + ':');
    }
  }

  else if(inputValue.length == 2 && e.keyCode != 8){
    e.preventDefault();
    if( e.keyCode > 52 ){
      $(this).val(inputValue + ':5');
    }
    else{
      $(this).val(inputValue + ':' + String.fromCharCode(e.keyCode));
    }
  }

  // Make sure that third value is not greater than 5
  else if(inputValue.length == 3 && e.keyCode != 8){
    if( e.keyCode > 52 ){
      e.preventDefault();
      $(this).val( inputValue + '5' );
    }
  }

  // Make sure only 5 Characters can be input
  else if(inputValue.length > 4 && e.keyCode != 8){
    e.preventDefault();
    return false;
  }
}

// Prevent Alpha and Special Character inputs
else{
  e.preventDefault();
  return false;
}
  }); // End Timepicker KeyUp function

})(jQuery);

And here is my deneme.php code:

<?php
header('Content-Type: text/html; charset=utf-8');

//database
define('DB_HOST', 'localhost');
define('DB_USERNAME', 'futurk_etkin');
define('DB_PASSWORD', 'etkin');
define('DB_NAME', 'futurk_etkin');
$link_m=$_GET['tarih'];
//get connection
$mysqli = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);

if(!$mysqli){die("Connection failed: " . $mysqli->error);}
//query to get data from the table
$query = sprintf("SELECT KayitTarihi AS tarih,TIME(KayitTarihi) as saat,Gerilim,Akim,Guc FROM Urun WHERE Date(KayitTarihi)=\"".$link_m."\"");

//execute query
$result = $mysqli->query($query);

//loop through the returned data
$data = array();
foreach ($result as $row) {$data[] = $row;}



//free memory associated with result
$result->close();


//close connection
$mysqli->close();
$sonuc=count($veri);
?>

<!DOCTYPE html>
<html>
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>.chart-container {width: auto;height: auto;}</style> 
        <!-- Bootstrap CSS and bootstrap datepicker CSS used for styling the demo pages-->
        <link rel="stylesheet" href="../../dist/css/datepicker.css">
        <link rel="stylesheet" href="../../bootstrap/css/bootstrap.css">
        <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
        
    </head>
    <body>
    <div class="col-sm-4 col-sm-offset-4 form-group" style="margin-top: 150px;">
        
        <div class="container">
            <div class="hero-unit">
            <form name="tarih" action="" method="GET">
                <input type="text" name="tarih" placeholder="tarih" class="ornek">
                <input type="text"  name="saat" placeholder="12:00" data-timepicker>
                <input type="submit" value="Gönder" />
            </form>
              
                
            </div>
              </div>
              </div>
        <div class="chart-container">
            <canvas id="mycanvas6"></canvas>
        </div>
        
        <!-- javascript -->
        <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
                
                
        <script>

    $(document).ready(function(){
     
     var data = <?php echo json_encode($data) ?>;
    
     
            var gun= [];
            var guc = [];
            var saat = [];

            for(var i in data) {
                gun.push(data[i].gun);
                guc.push(data[i].Guc);
                saat.push(data[i].saat);
            }

            var chartdata = {
                labels: saat,
                datasets: [
                    {label: "<?php echo $link ?>",
                        fill: false,
                        lineTension: 0.1,
                        backgroundColor: "rgba(211, 72, 54, 1)", 
                        borderColor: "rgba(211, 72, 54, 1)", 
                        pointHoverBackgroundColor: "rgba(211, 72, 54, 1)",
                        pointHoverBorderColor: "rgba(211, 72, 54, 1)",
                        data: guc
                    }
                ]
            };

            var ctx = $("#mycanvas6");

            var LineGraph = new Chart(ctx, {
                type: 'line',
                data: chartdata
            });
});     
                
                
                </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="../../dist/js/datepicker.js"></script>
        <script src="../../dist/js/timepicker.js"></script>
          <script type="text/javascript">
            
            $(document).ready(function () {
                
                $('.ornek').datepicker({ //# ile id üzerinden yaparsanız yanlızca bir input çalışır 
                    format: "yyyy-mm-dd" //dd-mm-yyyy
                });  
            
            });
        </script>
    
    </body>
</html>

javascript jquery

Solution 1:^[1]

You have to do an extra check where you check for the second value,see the fiddle here at line 21

if( e.keyCode > 50 && inputValue==2 ){

https://jsfiddle.net/2ysmtdze/

Solution 2:^[2]

Modified your code a bit:

specifically made change in following line:

// Make sure second value is not greater than 4
      else if (inputValue.length == 1 && e.keyCode != 8 && inputValue == 2)

(function($) {

 $('*[data-timepicker]').attr('autocomplete', 'off').keydown(function(e) {

    // Input Value var
    var inputValue = $(this).val();

    // Make sure keypress value is a Number
    if ((e.keyCode > 47 && e.keyCode < 58) || e.keyCode == 8) {

      // Make sure first value is not greater than 2
      if (inputValue.length == 0) {
        if (e.keyCode > 49) {
          e.preventDefault();
          $(this).val(2);
        }
      }

      // Make sure second value is not greater than 4
      else if (inputValue.length == 1 && e.keyCode != 8 && inputValue == 2) {
        e.preventDefault();
        if (e.keyCode > 50) {
          $(this).val(inputValue + '3:');
        } else {
          $(this).val(inputValue + String.fromCharCode(e.keyCode) + ':');
        }
      } else if (inputValue.length == 2 && e.keyCode != 8) {
        e.preventDefault();
        if (e.keyCode > 52) {
          $(this).val(inputValue + ':5');
        } else {
          $(this).val(inputValue + ':' + String.fromCharCode(e.keyCode));
        }
      }

      // Make sure that third value is not greater than 5
      else if (inputValue.length == 3 && e.keyCode != 8) {
        if (e.keyCode > 52) {
          e.preventDefault();
          $(this).val(inputValue + '5');
        }
      }

      // Make sure only 5 Characters can be input
      else if (inputValue.length > 4 && e.keyCode != 8) {
        e.preventDefault();
        return false;
      }
    }

    // Prevent Alpha and Special Character inputs
    else {
      e.preventDefault();
      return false;
    }
  }); // End Timepicker KeyUp function

})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="text" name="saat" placeholder="12:00" data-timepicker="">

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Emi-C
Solution 2

'jquery timepicker time format

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]