jquery选择时分插件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./time/css/timePicker.css"/>
</head>
<body>
<div class="row">
<div class="form-group">
<label class="col-sm-1 control-label" for="" id="">开始时间</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="beginTime"></input>
<font color="red" id="validateBeginTime"></font>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="col-sm-1 control-label" for="" id="">结束时间</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="endTime" ></input>
<font color="red" id="validateEndTime"></font>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./time/js/timepicker.js"></script>
<script type="text/jscript">
//时间选择
$("#beginTime").hunterTimePicker();
$("#endTime").hunterTimePicker();
</script>
</body>
</html> //附上引入的timePicker.css文件和timepicker.js文件
.Hunter-time-picker{
position: absolute;
border: 2px solid #c9cbce;
width: 280px;
background: #ffffff;
z-index: 999999;
font-size: 0;
}
.Hunter-time-picker:before, .Hunter-time-picker:after{
content: '';
display: block;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
position: absolute;
left: 20px;
z-index: 999999;
}
.Hunter-time-picker:before{
border-color: transparent transparent #ffffff;
top: -17px;
z-index: 9999999;
}
.Hunter-time-picker:after{
border-color: transparent transparent #c9cbce;
top: -20px;
}
.Hunter-time-picker *{
box-sizing: border-box;
margin: 0 auto;
padding: 0;
color: #666666;
font-family: "Microsoft YaHei";
font-size: 14px;
}
.Hunter-time-picker ul{
list-style: none;
}
.Hunter-time-picker ul li{
display: inline-block;
position: relative;
margin: 4px;
cursor: pointer;
}
.Hunter-time-picker p{
font-weight: bold;
padding: 0 4px;
margin-top: 4px;
margin-bottom: 10px;
}
.Hunter-time-picker .line{
width: 340px;
margin: 0 auto;
margin-top: 4px;
border-bottom: 1px solid #d8d8d8;
} /*选择小时*/
.Hunter-time-picker .Hunter-wrap{
position: relative;
width: 100%;
background: #ffffff;
padding: 9px;
}
.Hunter-time-picker .Hunter-hour-name{
display: inline-block;
width: 50px;
height: 30px;
text-align: center;
line-height: 30px;
position: relative;
background-color: #f5f5f5;
}
.Hunter-time-picker .Hunter-hour-name:hover{
color: #002DFF;
} .Hunter-time-picker .Hunter-hour.active{
z-index: 999999999;
}
.Hunter-time-picker .active .Hunter-hour-name{
color: #ffffff;
background-color: #3A7ADB;
}
.Hunter-time-picker .Hunter-minute-wrap{
display: none;
border: 1px solid #D8D8D8;
background: #ffffff;
position: absolute;
top: 29px;
width: 370px;
padding: 10px 10px 5px 10px;
}
.Hunter-time-picker .Hunter-minute{
width: 50px;
height: 30px;
text-align: center;
line-height: 30px;
color: #999999;
background-color: #f5f5f5;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.Hunter-time-picker .Hunter-minute:hover{
color: #002DFF;
}
.Hunter-time-picker .Hunter-minute.active {
color: #ffffff;
background-color: #3A7ADB;
}
.Hunter-time-picker .Hunter-clean-btn{
width: 108px;
height: 30px;
background-color: #3A7ADB!important;
color: #ffffff;
background-image: none !important;
border: 5px solid #3A7ADB;
border-radius: 0;
}
.Hunter-time-picker .Hunter-clean-btn:hover{
background-color: #0B4B94 !important;
border-color: #3A7ADB;
} (function ($) {
$.hunterTimePicker = function (box, options) {
var dates = {
hour: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
minute: ['00', '05', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55'],
};
var box = $(box);
var template = $('<div class="Hunter-time-picker" id="Hunter_time_picker"><div class="Hunter-wrap"><ul class="Hunter-wrap" id="Hunter_time_wrap"></ul></div></div>');
var time_wrap = $('#Hunter_time_wrap', template);
$(document).click(function() {
template.remove();
}); box.click(function(event){
event.preventDefault();
event.stopPropagation();
$('.Hunter-time-picker').remove();
var _this = $(this);
var offset = _this.offset();
var top = offset.top + _this.outerHeight() + 15;
template.css({
'left': offset.left,
'top': top,
});
buildTimePicker();
$('body').append(template); $('.Hunter-time-picker').click(function(event){
event.preventDefault();
event.stopPropagation();
});
}); function buildTimePicker(){
buildHourTpl();
hourEvent();
minuteEvent();
cleanBtnEvent();
}; function buildHourTpl(){
var hour_html = '<p>小时</p>';
for(var i = 0; i < dates.hour.length; i++){
var temp = box.val().split(":")[0];
hour_html += '<li class="Hunter-hour" data-hour="' + dates.hour[i] +'"><ul class="Hunter-minute-wrap"></ul><div class="Hunter-hour-name">' + dates.hour[i] + '</div></li>';
} hour_html += '<li class="Hunter-clean"><input type="button" class="Hunter-clean-btn" id="Hunter_clean_btn" value="清 空"></li>'
time_wrap.html(hour_html);
}; function buildMinuteTpl(cur_time){
var nowHour = cur_time[0].dataset.hour.split(':')[0];
dates.minute = ['00', '05', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55'];//重置分钟
var poi = cur_time.position();
var minute_html = '<p>分钟</p>';
var temp = box.val().split(":")[1];
for(var j = 0; j < dates.minute.length;j++){
dates.minute[j] = nowHour + ':' +dates.minute[j];
minute_html += '<li class="Hunter-minute" data-minute="' + dates.minute[j] + '">' + dates.minute[j] + '</li>';
}
time_wrap.html(minute_html);
}; function hourEvent(){
time_wrap.on('click', '.Hunter-hour', function(event){
event.preventDefault();
event.stopPropagation();
var _this = $(this);
time_wrap.find('.Hunter-hour').removeClass('active');
time_wrap.find('.Hunter-hour-name').removeClass('active');
time_wrap.find('.Hunter-minute-wrap').hide().children().remove();
_this.addClass('active');
_this.find('.Hunter-hour').addClass('active');
var hourValue = _this.data('hour');
var temp = box.val().split(":");
box.val(hourValue);
buildMinuteTpl(_this);
if(options.callback) options.callback(box);
return false;
});
}; function minuteEvent(){
time_wrap.on('click', '.Hunter-minute', function(event) {
event.preventDefault();
event.stopPropagation();
var _this = $(this);
var minuteValue = _this.data('minute');
var temp = minuteValue;
box.val(temp);
template.remove();
if(options.callback) options.callback(box);
return false;
});
}; function cleanBtnEvent(){
time_wrap.on('click', '#Hunter_clean_btn', function(event){
event.preventDefault();
event.stopPropagation();
box.val('');
template.remove();
if(options.callback) options.callback(box);
return false;
});
};
}; $.fn.extend({
hunterTimePicker: function (options) {
options = $.extend({}, options);
this.each(function () {
new $.hunterTimePicker(this, options);
});
return this;
}
});
})(jQuery);
附上效果图
jquery选择时分插件的更多相关文章
- [英] 推荐 15 个 jQuery 选择框插件
jQuery Selectbox Plugins let you create beautiful and eye catching select box for your websites inst ...
- 基于MVC4+EasyUI的Web开发框架经验总结（1）-利用jQuery Tags Input 插件显示选择记录
最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...
- FancySelect – 更好用的 jQuery 下拉选择框插件
FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...
- 选择29部分有用jQuery应用程序插件（免费点数下载）
免积分下载:http://download.csdn.net/detail/yangwei19680827/7238711 原文地址:http://www.cnblogs.com/sxwgf/p/36 ...
- jQuery Tags Input 插件显示选择记录
利用jQuery Tags Input 插件显示选择记录 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采 ...
- （转）基于MVC4+EasyUI的Web开发框架经验总结（1）-利用jQuery Tags Input 插件显示选择记录
http://www.cnblogs.com/wuhuacong/p/3667703.html 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开 ...
- 推荐几款jquery图片切换插件
一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...
- jQuery选择什么版本 1.x? 2.x? 3.x?
类似标题:jQuery选择什么版本?jquery一般用什么版本?jquery ie8兼容版本.jquery什么版本稳定? 目前jQuery有三个大版本:1.x:兼容ie678,使用最为广泛的,官方只做 ...
- Jquery之树形插件
1.DynaTree (推荐使用,说明文档以及样例在下载的压缩包里\doc\samples.html) DynaTree 是一个优化的动态jQuery树查看插件,它只在需要时才创建DOM元素.支持ch ...
随机推荐
- 码云上开源JAVA项目收藏
一. 个人学习项目 1. BootDo面向学习型的开源框架 (可以当做 管理台脚手架) BootDo是高效率,低封装,面向学习型,面向微服的开源Java EE开发框架. BootDo是在SpringB ...
- Gin框架系列01：极速上手
Gin是什么? Gin是Go语言编写的web框架,具备中间件.崩溃处理.JSON验证.内置渲染等多种功能. 准备工作 本系列演示所有代码都在Github中,感兴趣的同学可以自行查阅,欢迎大家一起完善. ...
- 【django】 django后台管理 导出excel表
from django.contrib import admin # Register your models here. import xlwt from django.http import Ht ...
- NKOJ3751 扫雷游戏
问题描述 有一款有趣的手机游戏.棋盘上有n颗地雷,玩家需要至少扫掉其中的k颗雷.每一步,玩家可以用手指在手机屏幕上划一条直线,该直线经过的地雷都会被扫除掉.问,最少需要划几次就能扫除k颗以上的地雷? ...
- 人工智能新手入门学习路线和学习资源合集（含AI综述/python/机器学习/深度学习/tensorflow）
[说在前面]本人博客新手一枚,象牙塔的老白,职业场的小白.以下内容仅为个人见解,欢迎批评指正,不喜勿喷![握手][握手] 1. 分享个人对于人工智能领域的算法综述:如果你想开始学习算法,不妨先了解人工 ...
- .git/info/refs not valid: is this a git repository?
今天用idea git提交的时候遇到了这个神奇的问题.git/info/refs not valid: is this a git repository? 看了很多网上的都不靠谱,最后自己乱点着找, ...
- 字符串学习笔记（二）---- StringBuffer
一.相关介绍 1.StringBuffer介绍 StringBuffer对象是字符串缓冲区对象,用于存放数据的容器 2.StringBuffer特点 StringBuffer(字符串缓冲区对象)的长度 ...
- Linux bash篇，基本信息和变量
1.shells目录 /etc/shells 2.查看用户所具有的shell /etc/passwd 3.查看当前用户执行过的shell ~/.bash_history 4 ...
- 7.5 this关键字的使用；标准学生类的编写 、构造方法的格式
/** 学生类** 起名字我们要求做到见名知意.* 而我们现在的代码中的n和a就没有做到见名知意,所以我要改进.** 如果有局部变量名和成员变量名相同,在局部使用的时候,采用的是就近的原则. * 我们 ...
- mysql--> find your databases' local position
1. find file: "my.ini" 2.Using ctrl+F find string "datadir" then you can see y ...