index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>jQuery-timepicker</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="css/jquery.timepicker.css" type="text/css" />
<script src="lib/jquery-1.7.2.js"></script>
<script src="lib/jquery.timepicker.js"></script>
</head>
<body>
<h1>jQuery TimePicker 示例</h1>
<form>
<input type="hidden" name="time_holder" class="timepicker-el" readonly="readonly" maxlength="5"></input>
<div class="timepicker unselected" unselectable="on" onselectstart="return false;">
<div class="timepicker-body">
<input type="input" value="00" class="time hr" maxlength="2" min="0" max="23" readonly="readonly"></input>
<input type="input" class="sep sep1 unselected" disabled="disabled" readonly="readonly" value=":"></input>
<input type="input" value="00" class="time mi" maxlength="2" min="0" max="59" readonly="readonly"></input>
<input type="input" class="sep sep2 unselected" disabled="disabled" readonly="readonly" value=":"></input>
<input type="input" value="00" class="time ms" maxlength="2" min="0" max="59" readonly="readonly"></input>
<input type="button" class="clear" value="x" readonly="readonly"></input>
</div>
<span class="up">+</span>
<span class="down">-</span>
</div>
</form>
</body>
</html>
jquery.timepicker.js
$(function(){
$('.timepicker .timepicker-body input.time').on('click', function(e) {
$(e.currentTarget).select().addClass('selected').siblings().removeClass('selected');
});
$('.timepicker .up').on('click', function() {
var $target = $('.timepicker .timepicker-body input.selected');
if ($target.length == 0) {
$target = $('.timepicker .timepicker-body input.hr').select().addClass('selected');
$target.siblings().removeClass('selected');
}
var min = parseInt($target.attr('min'));
var max = parseInt($target.attr('max'));
var value = parseInt($target.val()) + 1;
var length = String(value).length;
if (length > 2 || value > max) {
value = '00';
}
else if (value < min) {
value = max;
}
if (length == 1) {
value = '0' + String(value);
}
$target.val(value);
$('input[name=time_holder]').val($('.timepicker input.hr').val() + ":" + $('.timepicker input.mi').val() + ($('.timepicker input.ms').val() ? ':' + $('.timepicker input.ms').val() : ''));
$target.select();
});
$('.timepicker .down').on('click', function() {
var $target = $('.timepicker .timepicker-body input.selected');
if ($target.length == 0) {
$target = $('.timepicker .timepicker-body input.hr').select().addClass('selected');
$target.siblings().removeClass('selected');
}
var min = parseInt($target.attr('min'));
var max = parseInt($target.attr('max'));
var value = parseInt($target.val()) - 1;
var length = String(value).length;
if (length > 2 || value > max) {
value = '00';
}
else if (value < min) {
value = max;
}
if (length == 1) {
value = '0' + String(value);
}
$target.val(value);
$('input[name=time_holder]').val($('.timepicker input.hr').val() + ":" + $('.timepicker input.mi').val() + ($('.timepicker input.ms').val() ? ':' + $('.timepicker input.ms').val() : ''));
$target.select();
});
$('.timepicker input.clear').on('click', function() {
var now = new Date();
var hr = now.getHours();
var mi = now.getMinutes();
var ms = now.getSeconds();
hr = String(hr).length == 1 ? '0' + String(hr) : String(hr);
mi = String(mi).length == 1 ? '0' + String(mi) : String(mi);
ms = String(ms).length == 1 ? '0' + String(ms) : String(ms);
var value = hr + ":" + mi + ($('.timepicker input.ms').val() ? ":" + ms : "");
$('.timepicker input.hr').val(hr);
$('.timepicker input.mi').val(mi);
$('.timepicker input.ms').val(ms);
$('input[name=time_holder]').val(value);
$('.timepicker .timepicker-body input.time').removeClass('selected');
});
})
jquery.timepicker.css
body {
background-color: #FFF;
}
.timepicker {
width: 102px;
height: 20px;
position: relative;
display: inline-block;
float: left;
border: 1px solid gray;
}
.timepicker-body {
position: absolute;
left: 1px;
top: 1px;
width: 82px;
height: 20px;
margin: 0px;
padding: 0px;
border: 0px;
}
.hr {
width: 14px;
height: 16px;
border: 0px;
outline: 0px;
margin: 0px;
background: #FFF;
}
.sep {
width: 4px;
height: 18px;
border: 0px;
outline: 0px;
font-weight: bold;
margin: 0px;
padding: 0px;
background: #FFF;
}
.sep1 {
position: absolute;
left: 17px;
left\0: 16px;
}
.sep2 {
position: absolute;
left: 40px;
left\0: 34px;
background: #FFF;
}
.mi {
width: 14px;
height: 16px;
border: 0px;
outline: 0px;
margin: 0px;
padding: 0px;
background: #FFF;
}
.ms {
width: 14px;
height: 16px;
border: 0px;
outline: 0px;
margin: 0px;
padding: 0px;
background: #FFF;
}
.clear {
position: absolute;
right: 3px;
top: 0px;
width: 8px;
height: 18px;
border: 0px;
background: #FFF;
outline: 0px;
color: #555;
font-weight: bold;
margin: 0px;
padding: 0px;
border-radius: 3px;
cursor: pointer;
}
.clear:hover {
color: #000;
}
.up {
position: absolute;
right: 3px;
top: -4px;
width: 16px;
height: 14px;
border: 0px;
background: #555;
outline: 0px;
color: white;
font-weight: bold;
text-align: center;
font-size: 8px;
overflow: hidden;
border-radius: 3px;
cursor: pointer;
vertical-align: middle;
}
.up:hover {
background: #000;
}
.down {
position: absolute;
right: 3px;
top: 11px;
width: 16px;
height: 14px;
border: 0px;
background: #555;
outline: 0px;
color: white;
font-weight: bold;
text-align: center;
font-size: 6px;
overflow: hidden;
border-radius: 3px;
cursor: pointer;
vertical-align: middle;
}
.down:hover {
background: #000;
}
.unselected {
-moz-user-select:none;
-webkit-user-select:none;
}
效果:
- 大小: 27.4 KB
分享到:
相关推荐
**jQuery Timepicker插件详解** 在网页开发中,时间选择器是常见的交互元素,用于让用户方便地选取时间。"jQuery Timepicker"是一个轻量级、高效且易于使用的插件,专为实现小时和分钟选择而设计。只需几行简单的...
**jQuery Timepicker插件详解** 在网页开发中,时间选择器是一个常见的交互元素,用于方便用户输入或选择日期和时间。jQuery Timepicker是一款强大的插件,尤其适用于那些需要精确到时、分、秒的场景。它扩展了原生...
jQuery Timepicker Addon是一款流行的JavaScript库,用于在网页上创建美观、功能丰富的日期和时间选择器。这个插件是基于广泛使用的jQuery库构建的,它为用户提供了多种自定义选项,使得时间输入变得简单易用。这篇...
jQuery-timepicker 是一个广泛使用的 jQuery 插件,它为网页提供了优雅的日期和时间选择功能。这个插件允许用户方便地选择日期和时间,极大地提升了用户体验。 标题“日期组件时分秒 jQuery-timepicker内有demo的”...
**jQuery-Timepicker-Addon插件详解** `jQuery-Timepicker-Addon`是一款强大的JavaScript时间选择器插件,它基于广泛使用的jQuery库,为用户提供了一个优雅、功能丰富的日期和时间选择界面。这款插件不仅支持基本的...
而jQuery UI则是jQuery的一个扩展,提供了更多的组件和功能,其中包括日期和时间选择器,也就是我们今天要讨论的"Timepicker"。在这个压缩包中,包含的文件是为实现一个本地化支持的jQuery时间选择器插件准备的。 `...
《jQuery Timepicker Addon v1.0.0-0 使用详解》 在Web开发中,时间选择器是一种常见的用户交互元素,它使得用户能够方便地输入或选择日期和时间。jQuery Timepicker Addon是基于流行的JavaScript库jQuery的一个...
《jQuery时间选择器插件——jquery-timepicker.js详解》 在网页开发中,用户界面的交互性和用户体验至关重要,其中日期和时间的选择是一个常见的需求。为了简化这一过程,开发者们经常使用时间选择器插件。本文将...
《jQuery-Timepicker-Addon:构建高效日历时间选择器》 在Web开发中,用户界面的易用性和交互性是至关重要的。jQuery-Timepicker-Addon是jQuery库的一个扩展,为网页提供了一种优雅的方式来处理日期和时间的选择。...
**jQuery Timepicker插件详解** 在网页开发中,时间选择器是常见的交互元素,用于方便用户输入或选择日期和时间。jQuery Timepicker是一款强大的JavaScript插件,它为HTML表单中的`<input>`元素提供了优雅的时间...
**jQuery Timepicker插件详解** 在网页开发中,时间选择器是常见的交互元素,用于方便用户输入或选择时间。jQuery Timepicker是一个强大的JavaScript插件,它扩展了原生的HTML `<input type="text">` 元素,为用户...
jQuery Timepicker Addon的基本使用方法是引入jQuery库、Timepicker插件的CSS和JS文件,然后通过简单的jQuery选择器和方法来激活控件。例如: ```html <!DOCTYPE html> <title>jQuery Timepicker 示例 ...
jQuery-Timepicker-Addon-master,改进了jquery自带的datepicker,官网:http://trentrichardson.com/examples/timepicker/ 方便好使,内包含一个已经实现了效果的demo方便对照使用
jQuery Timepicker是一款基于jQuery库的插件,专用于在网页中添加时间选择功能。它提供了丰富的自定义选项和样式,使用户能够方便地选择或输入时间,通常用于表单中的时间字段。这款插件尤其适合那些需要用户输入...
jQuery Timepicker插件 关于 该项目不再得到积极维护。 不幸的是,我不再在新项目上使用jQuery和jQueryUI。 jQuery Timepicker Addon多年来一直是可供选择的时间选择器,当时没有多少可用。 我感谢能为社区做出贡献...
《jQuery UI Datepicker插件与timepicker时分秒扩展详解》 在Web开发中,日期和时间的选择常常是一项必不可少的功能,jQuery UI Datepicker插件是一个非常流行的选择工具,它为用户提供了直观、易于使用的日期选择...
总结来说,jQuery Timepicker是一个仿照Google Calendar时间选择功能的jQuery插件,为网页开发带来了更友好的时间输入体验。通过理解和运用这个插件,开发者可以提升网站或应用的用户体验,使得时间相关的数据输入变...
集成jQuery Timepicker Addon,首先需要确保你已经在项目中引入了jQuery、jQuery UI和Timepicker Addon的必要文件。这些文件通常包括: 1. jQuery库(如`jquery.js`) 2. jQuery UI库(如`jquery-ui.js`和相应的CSS...
最近在项目中引用了bootstrap-datatimepicker控件,但是发现该控件在日期选择框弹出状态下再次点击input则日期选择框... 解决办法: 在日期控件的show方法中给input加上disabled属性。在hide方法中取消disabled属性。
**jQuery UI Timepicker 插件** 是一个基于 jQuery 和 jQuery UI 库的高效时间选择器组件,它为网页应用提供了用户友好的时间选择功能。这个插件极大地简化了在网页表单中添加时间输入的复杂性,使得用户可以通过...