时间选择器(timepicker)
可以使用Slider拖动选择，也可以使用timespinner改变时间，或者手工填写。
自动判断位置
效果：
源码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="JS/jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" />
</head>
<body> <input id="test" class="time" />
<input id="Text1" class="time" />
<input id="Text2" class="time" />
</body>
</html>
<script src="JS/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
<script src="JS/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
<script src="JS/jquery.timepicker.js"></script>
<script type="text/javascript">
$('.time').<span style="font-family: Consolas, 'Courier New', Courier, mono, serif; line-height: 18px; background-color: rgb(248, 248, 248);">timepicker</span>();
</script>
//时间选择器，依赖于jquery.easyui
(function ($) {
$.fn.extend({
timepicker: function () {
$(this).each(function () {
var $this = $(this);
$(this).click(function () {
if (!document.getElementById("time_container")) {
$("body").append(createDiv($this.val()));
$('#timeSlider_Hour,#timeSlider_Minute').slider();
$('#time_timespinner').timespinner({ onSpinUp: $.fn.timepicker.timepicker_showTime2, onSpinDown: $.fn.timepicker.timepicker_showTime2 });
$("#time_container table,#time_container table tr,#time_container table td").css({
"background-color": "transparent",
margin: '0px'
})
} else {
var HHmm = $this.val();
if (HHmm == '') HHmm = '00:00';
var HH = HHmm.split(':')[0] * 1;
var mm = HHmm.split(':')[1] * 1;
$('#time_timespinner').timespinner('setValue', HHmm);
$.fn.timepicker.timepicker_showTime2();
}
$('body').bind("mousedown", $.fn.timepicker.timepicker_onMousedown); $("input#time_btnOK").unbind('click').click(function () {
$this.val($('#time_timespinner').timespinner('getValue')).change();
$("#time_container").hide();
});
var pos = getPosition($this);
$("#time_container").css({
position: "absolute",
"background-color": "#E3E3E3",
border: "1px solid #777777",
top: pos.top, // $this.offset().top + $this.outerHeight(),
left: pos.left //$this.offset().left
}).show();
})
}); //私有函数,返回元素距离窗口各边距离
function getDistance(obj) {
if (!obj instanceof jQuery) {
obj = $(obj);
}
var distance = {};
distance.top = (obj.offset().top - $(document).scrollTop());
distance.bottom = ($(window).height() - distance.top - obj.outerHeight());
distance.left = (obj.offset().left - $(document).scrollLeft());
distance.right = ($(window).width() - distance.left - obj.outerWidth());
return distance;
} function getPosition(obj) {
if (!obj instanceof jQuery) {
obj = $(obj);
}
var pos = {};
var containerH = $('#time_container').outerHeight();
var containerW = $('#time_container').outerWidth();
var distance = getDistance(obj);
if (distance.bottom < containerH && distance.top > containerH) {
pos.top = obj.offset().top - containerH;
} else {
pos.top = obj.offset().top + obj.outerHeight();
}
if (distance.right < containerW && distance.left > containerW) {
pos.left = obj.offset().left - containerW + obj.outerWidth();
} else {
pos.left = obj.offset().left;
}
return pos;
}
//私有函数，用于创建选择器html
function createDiv(HHmm) {
if (HHmm == '') HHmm = '00:00'; //如果当前时间为空则取00:00
var HH = HHmm.split(':')[0] * 1;
var mm = HHmm.split(':')[1] * 1; var sb = "<div id=\"time_container\" style=\"font-size: 14px; z-index:9999; position: relative; width: 260px; height: 200px; background-color: bisque; border: 1px green solid; -moz-box-shadow: 4px 4px 3px rgba(20%,20%,40%,0.5); -webkit-box-shadow: 4px 4px 3px rgba(20%,20%,40%,0.5); box-shadow: 4px 4px 3px rgba(20%,20%,40%,0.5); -ms-filter: 'progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=#000000)'; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');\">";
sb = sb + " <iframe src=\"about:blank\" style=\"top: 0px; left: 0px; width: 100%; height: 100%; border: 0px;\"></iframe>";
sb = sb + " <div style=\"position: absolute; top: 0px; left: 0px;\">";
sb = sb + " <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">";
sb = sb + " <tr style=\"height: 70px; line-height: 20px;\">";
sb = sb + " <td style=\"width: 50px; text-align: center;\">小时:</td>";
sb = sb + " <td>";
sb = sb + " <input id=\"timeSlider_Hour\" value=\"" + HH + "\" class=\"easyui-slider\" style=\"width: 180px\" data-options=\"showTip:true,max:23,rule: [0,'|',6,'|',12,'|',18,'|',23],onChange:$.fn.timepicker.timepicker_showTime\" /></td>";
sb = sb + " </tr>";
sb = sb + " <tr style=\"height: 70px; line-height: 20px;\">";
sb = sb + " <td style=\"width: 50px; text-align: center;\">分钟:</td>";
sb = sb + " <td>";
sb = sb + " <input id=\"timeSlider_Minute\" value=\"" + mm + "\" class=\"easyui-slider\" style=\"width: 180px\" data-options=\"showTip:true,max:59,rule: [0,'|',9,'|',19,'|',29,'|',39,'|',49,'|',59],onChange:$.fn.timepicker.timepicker_showTime\" /></td>";
sb = sb + " </tr>";
sb = sb + " </table>";
sb = sb + " <div style=\"width: 250px; text-align: right; margin: 10px; line-height: 30px;\">";
sb = sb + " <input value=\"" + HHmm + "\" style=\"width: 100px; font-size: 24px; height: 24px; line-height: 24px;\" id=\"time_timespinner\" readonly=\"readonly\" onchange=\"$.fn.timepicker.timepicker_showTime2();\" />";
sb = sb + " <input id=\"time_btnOK\" type=\"button\" value=\"确定\" style=\"margin-left: 20px; margin-right: 20px;\" />";
sb = sb + " </div>";
sb = sb + " </div>";
sb = sb + " </div>";
return sb;
}
//公开函数，当小时或者分钟的Slider改变时更新timspinner
$.fn.timepicker.timepicker_showTime = function () {
var h = parseInt($('#timeSlider_Hour').slider('getValue'));
var m = parseInt($('#timeSlider_Minute').slider('getValue'));
if (h < 10) h = '0' + h;
if (m < 10) m = '0' + m;
$('#time_timespinner').timespinner('setValue', h + ":" + m);
}
//公开函数，当单击文档时检测是否隐藏当前选择框
$.fn.timepicker.timepicker_onMousedown = function (event) {
var target = event.target || event.srcElement;
if (!(target.id == "time_container" || $(target).parents("#time_container").length > 0)) {
$("#time_container").hide();
$('body').unbind("mousedown", $.fn.timepicker.timepicker_onMousedown);
}
}
//公开函数，当timespinner改变时设置小时和分钟Slider
$.fn.timepicker.timepicker_showTime2 = function () {
var HHmm = $('#time_timespinner').timespinner('getValue');
var HH = HHmm.split(':')[0] * 1;
var mm = HHmm.split(':')[1] * 1;
$('#timeSlider_Hour').slider('setValue', HH);
$('#timeSlider_Minute').slider('setValue', mm);
}
}
})
})(jQuery);
时间选择器(timepicker)的更多相关文章
- Android零基础入门第57节：日期选择器DatePicker和时间选择器TimePicker
原文:Android零基础入门第57节:日期选择器DatePicker和时间选择器TimePicker 在实际开发中,经常会遇见一些时间选择器.日期选择器.数字选择器等需求,那么从本期开始来学习And ...
- Android 开发笔记___时间选择器---timePicker
像datepicker一样,也有timepicker. 同样有timepickerdialog 所用到的方法还是一样,监听时间选择器的变化. package com.example.alimjan.h ...
- android 开发 时间选择器TimePicker的使用
android系统自带时间控件:DatePicker 日期显示控件 DatePickerDialog 日期对话框控件TimePicker 时间显示控件 TimePickerDialog 时间对话框控件 ...
- 时间选择器（TimePicker）
时间选择器(TimePicker) 显示一个可供时间选择的界面 常用方法: setIs24HourView(true|false) 设置24小时格式,true为24小时格式 setCurrentHou ...
- Android中TimePicker时间选择器的使用和获取选择的时和分
场景 实现效果如下 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 将布局改 ...
- 移动端material风格日期时间选择器
原文 好多时候在移动端需要一个的日期选择器,由于在应用上有可能应用各种框架库(Vue.js, React.js, zepto.js等):所以说一个无依赖的,这样易于上层进行封装.直接开门见山,先来张动 ...
- Android中实现日期时间选择器(DatePicker和TimePicker)
利用Android应用框架提供的DatePicker(日期选择器)和TimePicker(时间选择器),实现日期时间选择器. Dialog的Content布局文件(date_time_dialog.x ...
- TimePicker 时间选择器
用于选择或输入日期 固定时间点 提供几个固定的时间点供用户选择 使用 el-time-select 标签,分别通过star.end和step指定可选的起始时间.结束时间和步长 <el-time- ...
- iView -- TimePicker 自定义修改时间选择器选择时间面板样式
iView官方组件展示效果: 期望的最终效果: 为什么要修改期望效果? 项目需要只选择小时,分钟跟秒的不需要,而官方并没有直接相关的小时组件或者是设置显示成小时或分钟或秒的时间选择器,因为自己直接修改 ...
随机推荐
- JavaScript单独的模块中传递数据
首先我们来看看这张图,让我们来思考一下! 下买我给出我的完整思路代码 html代码: <!DOCTYPE html> <html lang="zh-CN"> ...
- SSE图像算法优化系列二十一：基于DCT变换图像去噪算法的进一步优化（100W像素30ms）。
在优化IPOL网站中基于DCT(离散余弦变换)的图像去噪算法(附源代码) 一文中,我们曾经优化过基于DCT变换的图像去噪算法,在那文所提供的Demo中,处理一副1000*1000左右的灰度噪音图像耗时 ...
- 单片机 MCU 中 stack 使用的探讨
stack 的使用,是单片机开发中影响最大,但是最少被讨论的问题.而提及这个问题的地方,都是对这个问题含糊其辞. 今天花了点时间,使用最笨的办法,直接阅读汇编代码,来对这个问题就行探究,这里做一下记录 ...
- 机器人中的轨迹规划（Trajectory Planning ）
Figure. Several possible path shapes for a single joint 五次多项式曲线(quintic polynomial) $$\theta(t)=a_0+ ...
- 【Android】解析Paint类中Xfermode的使用
Paint类提供了setXfermode(Xfermode xfermode)方法,Xfermode指明了原图像和目标图像的结合方式.谈到Xfermode就不得不谈它的派生类PorterDuffXfe ...
- const的位置问题
来源:牛客网 下列哪两个是等同的 int b; 1.const int *a = &b; 2.const * int a = &b; 3.const int* const a = &a ...
- SpringBoot集成RabbitMQ消息队列搭建与ACK消息确认入门
1.RabbitMQ介绍 RabbitMQ是实现AMQP(高级消息队列协议)的消息中间件的一种,最初起源于金融系统,用于在分布式系统中存储转发消息,在易用性.扩展性.高可用性等方面表现不俗.Rabbi ...
- JVM：Java常见内存溢出异常分析
转载自:http://www.importnew.com/14604.html Java虚拟机规范规定JVM的内存分为了好几块,比如堆,栈,程序计数器,方法区等,而Hotspot jvm的实现中,将堆 ...
- 优化实现Mobile Diffuse动态直接光照shader
项目中美术使用了Unity自带的Mobile/Diffuse这个shader制作了一部分场景素材,这个shader会依赖场景中的动态实时光源,比较耗费. 于是自己手动重写一份,简化shader的消耗, ...
- SkyWalking
介绍 SkyWalking 创建与2015年,提供分布式追踪功能.从5.x开始,项目进化为一个完成功能的Application Performance Management系统.他被用于追踪.监控和诊 ...