jQuery timepicker時間格式
[英]jquery timepicker time format
問題描述
我想選時間。 我有一些代碼，但是我的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>
2 個解決方案
解決方案1
0 2016-11-15 08:39:41
修改了一下代碼：
在以下行中專門進行了更改：
// 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="">
解決方案2
0 已采納 2016-11-15 08:47:31
jQuery timepicker 時間格式不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.