Jquery时间选择器时间格式

我想创建一个timepicker。我有一些代码，但我的javascript代码不允许写时间像16:46。当我想写这个的时候。我的时间看起来是13:46。当我写比2大的第二项时，它总是看起来像3。我该怎么办?

下面是我的代码:

(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);

下面是我的deneme。php代码:

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

您必须在检查第二个值时进行额外的检查，参见第21行

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

https://jsfiddle.net/2ysmtdze/

稍微修改一下你的代码:

特别更改了以下行:

// 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="">

相关内容

最新更新

热门标签：