使用jQuery获取时间选择器
[英]using jquery to get a time picker
问题描述
我不知道jQuery。 找到此脚本后，我正在寻找time picker 。 谁能帮助我，我应该如何利用这段代码在HTML页面中获取时间选择器。
/* jQuery timepicker
* replaces a single text input with a set of pulldowns to select hour, minute, and am/pm
*
* Copyright (c) 2007 Jason Huck/Core Five Creative (http://www.corefive.com/)
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
*
* Version 1.0
*/
(function($){
jQuery.fn.timepicker = function(){
this.each(function(){
// get the ID and value of the current element
var i = this.id;
var v = $(this).val();
// the options we need to generate
var hrs = new Array('01','02','03','04','05','06','07','08','09','10','11','12');
var mins = new Array('00','15','30','45');
var ap = new Array('am','pm');
// default to the current time
var d = new Date;
var h = d.getHours();
var m = d.getMinutes();
var p = (h >= 12 ? 'pm' : 'am');
// adjust hour to 12-hour format
if(h > 12) h = h - 12;
// round minutes to nearest quarter hour
for(mn in mins){
if(m <= parseInt(mins[mn])){
m = parseInt(mins[mn]);
break;
}
}
// increment hour if we push minutes to next 00
if(m > 45){
m = 0;
switch(h){
case(11):
h += 1;
p = (p == 'am' ? 'pm' : 'am');
break;
case(12):
h = 1;
break;
default:
h += 1;
break;
}
}
// override with current values if applicable
if(v.length == 7){
h = parseInt(v.substr(0,2));
m = parseInt(v.substr(3,2));
p = v.substr(5);
}
// build the new DOM objects
var output = '';
output += '<select id="h_' + i + '" class="h timepicker">';
for(hr in hrs){
output += '<option value="' + hrs[hr] + '"';
if(parseInt(hrs[hr]) == h) output += ' selected';
output += '>' + hrs[hr] + '</option>';
}
output += '</select>';
output += '<select id="m_' + i + '" class="m timepicker">';
for(mn in mins){
output += '<option value="' + mins[mn] + '"';
if(parseInt(mins[mn]) == m) output += ' selected';
output += '>' + mins[mn] + '</option>';
}
output += '</select>';
output += '<select id="p_' + i + '" class="p timepicker">';
for(pp in ap){
output += '<option value="' + ap[pp] + '"';
if(ap[pp] == p) output += ' selected';
output += '>' + ap[pp] + '</option>';
}
output += '</select>';
// hide original input and append new replacement inputs
$(this).attr('type','hidden').after(output);
});
$('select.timepicker').change(function(){
var i = this.id.substr(2);
var h = $('#h_' + i).val();
var m = $('#m_' + i).val();
var p = $('#p_' + i).val();
var v = h + ':' + m + p;
$('#' + i).val(v);
});
return this;
};
})(jQuery);
/* SVN: $Id: jquery.timepicker.js 456 2007-07-16 19:09:57Z Jason Huck $ */
3 个解决方案
解决方案1
3 已采纳 2014-04-20 03:11:00
的HTML
<input type="text" id="timepicker"/>
Java脚本
<script type="text/javascript">
$(document).ready(function() {
$('#timepicker').timepicker();
});
</script>
在头安装jQuery库
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
这是下面的示例脚本吗？
演示版
解决方案2
2 2014-04-20 02:55:20
在HTML中
<input type="text" class="timepicker" name="foo" />
在页脚中，添加javascript，然后
$(document).ready(function() {
$('.timepicker').timepicker();
});
假设您正在加载jQuery，并编写其余的HTML。
它还使用了一个不存在的（也许）名为“ timepicker”的类，因此仅通过将该类添加到每个输入即可轻松地将其同时分配给多个字段。 您也可以使用<div> ，但是我假设您希望输入<form>
加载订单示例
<html>
<head>
...
</head>
<body>
...
<form ... >
...
<input type="text" class="timepicker" name="foo" />
...
</form>
...
</body>
<script src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="WHATEVER_YOU_NAMED_TIMEPICKER.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.timepicker').timepicker();
});
</script>
</html>
解决方案3
0 2018-04-12 04:03:42
我在下面的jQuery库中使用
<html>
<head>
...
</head>
<body>
...
<form ... >
...
<input type="text" class="timepicker" name="timepicker" />
...
</form>
...
</body>
<script src="//code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.timepicker').timepicker({
timeFormat: 'h:mm p',
interval: 30,
minTime: '10',
maxTime: '6:00pm',
defaultTime: '11',
startTime: '10:00',
dynamic: false,
dropdown: true,
scrollbar: true
});
});
</script>
</html>
如何使用Clean jQuery Date and Time Picker Plugin设置从一个选择器到另一个选择器的日期-datetimepicker
[英]How to set a date From one picker to another picker using Clean jQuery Date and Time Picker Plugin - datetimepicker
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.