分享一个时间选择控件,基于jquery

猿敲月下码 2014-08-12 03:53:09
最近在项目中需要用到一个时间选择控件,只有小时分钟的那种
网上找了不太理想,于是自己做了一个.不是很难,采用jquery插件形式开发.

下面是效果图:





HTML + JS代码如下:
<html>

 <head>

  <title> New Document </title>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

  <script src="http://static.blog.csdn.net/scripts/jquery.js"></script>

  <script type="text/javascript">

/**

 * 使用方法:

$(function() {

	$('table input').timepick();	

	$('#t').timepick({format : 'hh时mm分'});

	$('#a').timepick({onOK:function(val,$target){

		alert(val)

	}});

})

 */

 //////////////插件-开始//////////////

;(function($){

	

	var $timePanel = null

		,$hour = null

		,$minute = null

		,currentTarget = null

		,date = new Date();

	

	// 默认设置

	var defOptions = {

		// 偏移量

		offsetX:0

		,offsetY:22

		// 格式化输出

		,format:'hh:mm'

		,hourName:'时'

		,minuteName:'分'

		// 样式

		,css:{'cursor':'pointer'}

		// 点确定触发的事件

		,onOK:function(val,target){

			target.val(val);

		}

	}

	

		

 	$.fn.timepick = function(options,param){

 		options = options || {};

 		return this.each(function(){

			var state = $.data(this, 'timepick');

			// 如果已经存在,只设置options

			if (state){

				$.extend(state.options, options);

			} else { // 如果不存在根据当前dom节点绑定timepick参数

				state = $.data(this, 'timepick', {

					options: $.extend({}, defOptions, options)

				});

				

				init(this);

			}

			// 设置当前dom样式

			$(this).css(state.options.css);

 		})

 	}

 	

 	// 初始化

 	function init(target){

		initPanel(target);

		initEvent(target);

 	}

 	

 	// 初始化事件

 	function initEvent(target){

		$(target).click(function(event){

 			currentTarget = target;

 			loadValue(target);

			showTimePanel(target);

		});

 	}

 	

 	// 创建面板

 	function initPanel(target){

 		if(!$timePanel){

 			// 创建一个一行三列的表格

 			var $table = createTable(target);

 			

 			$timePanel = createPanel($table);

 			

 			createSelect($timePanel);

 			

 			$('body').append($timePanel);

 		}

 	}

 	

 	function createTable(target){

 		// 创建表格

		var $table = $('<table style="font-size:12px;border-collapse: collapse;"></table>');

		var $tr = $('<tr>');

		var timepick = $.data(target).timepick;

		var options = timepick.options;

		

		$tr.append(createHourTD())

			.append($('<td>'+options.hourName+'</td>'))

			.append(createMinuteTD())

			.append($('<td>'+options.minuteName+'</td>'))

			.append(createOkTD());

			

		$table.append($tr);

		

		return $table;

 	}

 	

 	function createPanel($table){

 		var $panel =  $('<div class="timepick"></div>').css({

			display:"none"

			,position:"absolute"

			,'background-color':'#fff'

			,border:'1px solid #ccc'

		});

 			

 		$panel.append($table);

 		

 		return $panel;

 	}

 	

 	function createSelect($timePanel){

 		var $selects = $timePanel.find('select');

 		

 		$hour = $selects.eq(0);

 		$minute = $selects.eq(1);

 	}

 	

 	function createHourTD(){

 		return createTimeTD(24);

 	}

 	

 	function createMinuteTD(){

 		return createTimeTD(60);

 	}

 	

 	function createOkTD(){

 		var $td = $('<td>').css({'padding':'0px 5px 0px 5px'});

 		var $a = $('<a href="javascript:void(0)">确定</a>');

 		

 		$a.css({

 			color: '#329ECC'

 			,'text-decoration': 'none'

 		});

 		

 		$a.click(function(){

 			okHandler();

 		});

 		

 		$td.append($a);

 		

 		return $td;	

 	}

 	

 	// 显示面板

 	function showTimePanel(target){

 		var targetOffset = $(target).offset();

 		var timepick = $.data(target).timepick;

 		

        $timePanel.offset({top: (targetOffset.top + timepick.options.offsetY)

        	, left: (targetOffset.left + timepick.options.offsetX)});

        

 		$timePanel.show();

 	}

 	

 	// 关闭面板

 	function hideTimePanel(){

 		 $timePanel.offset({top: 0, left: 0 });

 		 $timePanel.hide();

 	}

 	

	/**

	 * 格式化日期<br>

	 * 使用方法:

	 * <code>

	 * var dateStr = format(new Date(),'yyyy-MM-dd hh:mm:ss.S');

	 * </code>

	 * 

	 * @param dateInstance Date实例

	 * @param 格式化字符串,如"yyyy-MM-dd","yyyy-MM-dd hh:mm:ss.S"

	 * 

	 * @return 返回格式化后的字符串

	 */

	function format(dateInstance,pattern) {

		var o = {   

			"M+" : dateInstance.getMonth()+1,                 //月份    

			"d+" : dateInstance.getDate(),                    //日    

			"h+" : dateInstance.getHours(),                   //小时    

			"m+" : dateInstance.getMinutes(),                 //分    

			"s+" : dateInstance.getSeconds(),                 //秒    

			"q+" : Math.floor((dateInstance.getMonth()+3)/3), //季度    

			"S"  : dateInstance.getMilliseconds()             //毫秒    

		};   

		if(/(y+)/.test(pattern)) {

			pattern = pattern.replace(RegExp.$1, (dateInstance.getFullYear()+"").substring(4 - RegExp.$1.length));   

		}

			

		for(var k in o) {

			if(new RegExp("("+ k +")").test(pattern)) {

				pattern = pattern.replace(RegExp.$1, (RegExp.$1.length == 1) 

					? (o[k]) 

					: (("00"+ o[k]).substring((""+ o[k]).length))); 

			}

		}

			

		return pattern; 

	}

 	

 	// 确定事件句柄

 	function okHandler(){

 		// 获取<select>标签,第一个是小时,第二个分

 		var currentTimepick = $.data(currentTarget).timepick;

 		

 		var hourVal = $hour.val();

 		var minuteVal = $minute.val();

 		

 		bindValue(currentTarget,hourVal,minuteVal);

 		

 		var onOK = currentTimepick.options.onOK;

 		

 		if($.isFunction(onOK)){

 			// 格式化输出

	 		var val = formatValue(currentTimepick.options.format,hourVal,minuteVal);

	 		onOK(val,$(currentTarget));

 		}

 		

 		hideTimePanel();

 	}

 	

 	function formatValue(formatStr,hourVal,minuteVal){

 		// 借用Date对象赋值,进行后续的格式化

 		date.setHours(hourVal); // 时

 		date.setMinutes (minuteVal); // 分

 		

 		return format(date,formatStr);

 	}

 	

 	function bindValue(target,hour,minute){

 		target.hourVal = hour;

 		target.minuteVal = minute;

 	}

 	

 	function loadValue(target){

 		var hourVal = target.hourVal || '00';

 		var minuteVal = target.minuteVal || '00';

 		

 		$hour.val(hourVal);

 		$minute.val(minuteVal);

 	}

 	

 	function createTimeTD(maxTime){

 		var $td = $('<td>');

 		

 		var selectHtml = ['<select>'];

 		

 		for(var i=0,len=maxTime; i<len; i++) {

 			var time = formatNum(i);

 			selectHtml.push('<option value="'+time+'">'+time+'</option>');

 		}

 		selectHtml.push('</select>');

 		

 		$td.html(selectHtml.join(''));

 		

 		return $td;

 	}

 	

 	function formatNum(num){

 		return num < 10 ? "0" + num : num;

 	}

 	

 	// 点击空白地方隐藏面板

 	$(document).click(function(e){

 		if($timePanel){

 			var obj = e.target;

 			

		    var isOutSide = $(obj).parents('.timepick').length == 0;

		    var notCurrentTarget = (obj != currentTarget);

		    // 鼠标点空白地方并且没有点在输入框上

		    if(isOutSide && notCurrentTarget){

		    	hideTimePanel();

		    }

 		}

	});

 	

 	

})(jQuery);

 //////////////插件-结束//////////////

 

$(function(){

	$('table input').timepick();	

	$('#t').timepick({format : 'hh时mm分'});

	$('#a').timepick({onOK:function(val,$target){

		alert(val)

	}});

})

  </script>

 </head>



 <body>

<table >

		<tr><td><input type="text"></td></tr>

		<tr><td><input type="text"></td></tr>

	</table>

	

	<input id="t" type="text">

	

	<a id="a" href="#" style="position: absolute;top: 100px;left: 300px;">选择时间</a>

 </body>

</html>
...全文
817 16 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
16 条回复
切换为时间正序
请发表友善的回复…
发表回复
pixian0237 2017-01-06
  • 打赏
  • 举报
 回复
引用 5 楼 thc1987 的回复:
做了下改进,优化交互,主要是用户点击次数变少了 效果图 JS代码: 
/**
 * 使用方法:
$(function() {
	$('table input').timepick();	
	$('#t').timepick({format : 'hh时mm分'});
	$('#a').timepick({onOK:function(val,$target){
		alert(val)
	}});
})
 */
;(function($){
	
	var $timePanel = null
		,$hourTDs = null
		,$minuteTDs = null
		,currentTarget = null
		,date = new Date()
		,hourTdIdPrefix = 'timepickH_'
		,minuteTdIdPrefix = 'timepickM_';
		
	var timeTablelHtml = [
		'<table>'
			,'<tr>'
				,'<td>时</td>'
				,'<td><table>'
					,'<tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>'
					 ,'<tr><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td></tr>'
					 ,'<tr><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td></tr>'
					,'<tr><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td></tr>'
					 ,'</table></td>'
			,'</tr>'
			,'<tr><td colspan="2"><hr></td></tr>'
			,'<tr>'
				,'<td>分</td>'
				,'<td><table>'
						,'<tr><td>0</td><td>5</td><td>10</td><td>15</td><td>20</td><td>25</td></tr>'
						,'<tr><td>30</td><td>35</td><td>40</td><td>45</td><td>50</td><td>55</td></tr>'
					,'</table></td>'
			,'</tr>'
			,'<tr><td> </td><td align="right"><a href="javascript:void(0)">确定</a></td></tr>'
		,'</table>'
	].join('');
	
	// 默认设置
	var defOptions = {
		// 偏移量
		offsetX:0
		,offsetY:22
		// 格式化输出
		,format:'hh:mm'
		// 样式
		,css:{'cursor':'pointer'}
		// 点确定触发的事件
		,onOK:function(val,target){
			target.val(val);
		}
	}
	
		
 	$.fn.timepick = function(options,param){
 		options = options || {};
 		return this.each(function(){
			var state = $.data(this, 'timepick');
			// 如果已经存在,只设置options
			if (state){
				$.extend(state.options, options);
			} else { // 如果不存在根据当前dom节点绑定timepick参数
				state = $.data(this, 'timepick', {
					options: $.extend({}, defOptions, options)
				});
				
				init(this);
			}
			// 设置当前dom样式
			$(this).css(state.options.css);
 		})
 	}
 	
 	// 初始化
 	function init(target){
		initPanel(target);
		initEvent(target);
 	}
 	
 	// 初始化事件
 	function initEvent(target){
		$(target).click(function(event){
 			currentTarget = target;
 			loadValue(target);
			showTimePanel(target);
		});
 	}
 	
 	// 创建面板
 	function initPanel(target){
 		if(!$timePanel){
 			// 创建一个一行三列的表格
 			var $table = createTable(target);
 			
 			$timePanel = createPanel($table);
 			
 			$('body').append($timePanel);
 		}
 	}
 	
 	function createTable(target){
 		// 创建表格
		var $table = $(timeTablelHtml);
		var $subTables = $table.find('table');
		
		var $hourTable = $subTables.eq(0);
		var $minuteTable = $subTables.eq(1);
		
		$hourTDs = $hourTable.find('td');
		$minuteTDs = $minuteTable.find('td');
		
		initId($hourTDs,$minuteTDs);
		
		$hourTDs.click(function(){
			setHour($(this).html());
		});
			
		$minuteTDs.click(function(){
			setMinute($(this).html());
		});
		
		$table.find('a').click(function(){
 			okHandler();
 		});
 		
 		initCss($table,$hourTDs,$minuteTDs);
		
		return $table;
 	}
 	
 	function initCss($table,$hourTDs,$minuteTDs){
 		$table.css({'font-size':'12px','text-align':'center'});
 		$table.find('hr')
 			.css({height:'0px'
 			,'border-top':'1px solid #c8cacc'
 			,'border-right':'0px'
 			,'border-bottom':'0px'
 			,'border-left':'0px'});
 			
 		var $subTables = $table.find('table');
 		
 		$subTables.find('td').css({
			'cursor':'pointer'
			,'font-size':'12px'
			,'text-align':'center'
			,'padding':'2px 4px 2px 4px'
		});
		
 		$minuteTDs.css({'color':'#e02d2d'});
 		
 		$table.find('a').css({
 			color: '#329ECC'
 			,'text-decoration': 'none'
 		});
 	}
 	
 	function setHour(val){
 		$hourTDs.css({'background-color':'#fff'});
		getHourTD(val).css({'background-color':'#95b8e7'});
		currentTarget.hourVal = val;
 	}
 	
 	function setMinute(val){
 		$minuteTDs.css({'background-color':'#fff'});
		getMinuteTD(val).css({'background-color':'#95b8e7'});
		currentTarget.minuteVal = val;
 	}
 	
 	function getHourTD(val){
 		return $('#'+hourTdIdPrefix + val);
 	}
 	
 	function getMinuteTD(val){
 		return $('#'+minuteTdIdPrefix + val);
 	}
 	
 	function initId($hourTDs,$minuteTDs){
 		$hourTDs.each(function(){
 			$(this).attr('id',hourTdIdPrefix + $(this).html());
 		});
 		$minuteTDs.each(function(){
 			$(this).attr('id',minuteTdIdPrefix + $(this).html());
 		});
 	}
 	
 	function createPanel($table){
 		var $panel =  $('<div class="timepick"></div>').css({
			display:"none"
			,position:"absolute"
			,'background-color':'#fff'
			,border:'1px solid #ccc'
			,'padding':'5px'
		});
 			
 		$panel.append($table);
 		
 		return $panel;
 	}
 	
 	
 	// 显示面板
 	function showTimePanel(target){
 		var targetOffset = $(target).offset();
 		var timepick = $.data(target).timepick;
 		
        $timePanel.offset({top: (targetOffset.top + timepick.options.offsetY)
        	, left: (targetOffset.left + timepick.options.offsetX)});
        
 		$timePanel.show();
 	}
 	
 	// 关闭面板
 	function hideTimePanel(){
 		 $timePanel.offset({top: 0, left: 0 });
 		 $timePanel.hide();
 	}
 	
	/**
	 * 格式化日期<br>
	 * 使用方法:
	 * <code>
	 * var dateStr = format(new Date(),'yyyy-MM-dd hh:mm:ss.S');
	 * </code>
	 * 
	 * @param dateInstance Date实例
	 * @param 格式化字符串,如"yyyy-MM-dd","yyyy-MM-dd hh:mm:ss.S"
	 * 
	 * @return 返回格式化后的字符串
	 */
	function format(dateInstance,pattern) {
		var o = {   
			"M+" : dateInstance.getMonth()+1,                 //月份    
			"d+" : dateInstance.getDate(),                    //日    
			"h+" : dateInstance.getHours(),                   //小时    
			"m+" : dateInstance.getMinutes(),                 //分    
			"s+" : dateInstance.getSeconds(),                 //秒    
			"q+" : Math.floor((dateInstance.getMonth()+3)/3), //季度    
			"S"  : dateInstance.getMilliseconds()             //毫秒    
		};   
		if(/(y+)/.test(pattern)) {
			pattern = pattern.replace(RegExp.$1, (dateInstance.getFullYear()+"").substring(4 - RegExp.$1.length));   
		}
			
		for(var k in o) {
			if(new RegExp("("+ k +")").test(pattern)) {
				pattern = pattern.replace(RegExp.$1, (RegExp.$1.length == 1) 
					? (o[k]) 
					: (("00"+ o[k]).substring((""+ o[k]).length))); 
			}
		}
			
		return pattern; 
	}
 	
 	// 确定事件句柄
 	function okHandler(){
		var currentTimepick = $.data(currentTarget).timepick;
 		var onOK = currentTimepick.options.onOK;
 		
 		if($.isFunction(onOK)){
 			var hourVal = currentTarget.hourVal || '0';
 			var minuteVal = currentTarget.minuteVal || '0';
 			// 格式化输出
 			// 获取<select>标签,第一个是小时,第二个分
	 		var val = formatValue(currentTimepick.options.format,hourVal,minuteVal);
	 		onOK(val,$(currentTarget));
 		}
 		
 		hideTimePanel();
 	}
 	
 	function formatValue(formatStr,hourVal,minuteVal){
 		// 借用Date对象赋值,进行后续的格式化
 		date.setHours(hourVal); // 时
 		date.setMinutes (minuteVal); // 分
 		
 		return format(date,formatStr);
 	}
 	
 	function loadValue(target){
 		var hourVal = target.hourVal || '00';
 		var minuteVal = target.minuteVal || '00';
 		
 		setHour(hourVal);
 		setMinute(minuteVal);
 	}
 	
 	
 	function formatNum(num){
 		return num < 10 ? "0" + num : num;
 	}
 	
 	// 点击空白地方隐藏面板
 	$(document).click(function(e){
 		if($timePanel){
 			var obj = e.target;
 			
		    var isOutSide = $(obj).parents('.timepick').length == 0;
		    var notCurrentTarget = (obj != currentTarget);
		    // 鼠标点空白地方并且没有点在输入框上
		    if(isOutSide && notCurrentTarget){
		    	hideTimePanel();
		    }
		}
	});
 	
 	
})(jQuery);
请问下，这个是怎么用啊。。是
 <input type="text" id="time" onClick=" $(function() {
            $('time').timepick();   
        $('#t').timepick({format : 'hh时mm分'});
        $('#a').timepick({onOK:function(val,$target){
            alert(val)
        }});
    })"/>
这样吗？就是在输入框里面，在点击事件触发函数吗
qqm05 2014-10-08
  • 打赏
  • 举报
 回复
引用 14 楼 apollokk 的回复:
[quote=引用 8 楼 qqm05 的回复:]
网上有好的时间选择控件了，基于 jQuery UI Datepicker：
js及css下载地址：
http://trentrichardson.com/examples/timepicker/

效果图：

这个时间选择挺不错的，不知能不能把日期部份去掉？[/quote]
可以




        $(".datepicker").datetimepicker({

            timeOnly: true,//只选择时间

            timeOnlyTitle:'选择时间',//timeOnly为true时有效

            timeText: '时间',

            hourText: '小时',

            minuteText: '分钟',

            secondText: '秒',

            currentText: '现在',

            closeText: '完成',

            showSecond: true, //显示秒  

            timeFormat: 'HH:mm:ss', //格式化时间  

            dateFormat: 'yy-mm-dd'

        });
hookee 2014-08-14
  • 打赏
  • 举报
 回复
支持一下...
码无边 2014-08-14
  • 打赏
  • 举报
 回复
原创的东西不错，但是开源的插件，用起来也很方便。
Hello World, 2014-08-14
  • 打赏
  • 举报
 回复
引用 8 楼 qqm05 的回复:
网上有好的时间选择控件了，基于 jQuery UI Datepicker： js及css下载地址： http://trentrichardson.com/examples/timepicker/ 效果图：
这个时间选择挺不错的，不知能不能把日期部份去掉？
Mr-Hero 2014-08-14
  • 打赏
  • 举报
 回复
支持楼主，支持原创，顺便接分来了
猿敲月下码 2014-08-14
  • 打赏
  • 举报
 回复
引用 9 楼 xzy21com 的回复:
几个bug:
1、点击输入框直接确定，显示00：00。再次点击时不会自动选中0、0。非得点击的才可记住。
2、如果手动修改了值，仍记忆是点击的数字。明显是不是读取文本框的值。硬性记录点击的值不够灵活。
3、文本框中输入，但没有自动纠正功能。
建议输入框添加自动纠正功能，点击是自动读取文本框内值来高亮，代码要大大精简。
谢谢反馈~
Hello World, 2014-08-13
  • 打赏
  • 举报
 回复
还好，1到4分手输入？
猿敲月下码 2014-08-13
  • 打赏
  • 举报
 回复
做了下改进,优化交互,主要是用户点击次数变少了
效果图


JS代码:
/**

 * 使用方法:

$(function() {

	$('table input').timepick();	

	$('#t').timepick({format : 'hh时mm分'});

	$('#a').timepick({onOK:function(val,$target){

		alert(val)

	}});

})

 */

;(function($){

	

	var $timePanel = null

		,$hourTDs = null

		,$minuteTDs = null

		,currentTarget = null

		,date = new Date()

		,hourTdIdPrefix = 'timepickH_'

		,minuteTdIdPrefix = 'timepickM_';

		

	var timeTablelHtml = [

		'<table>'

			,'<tr>'

				,'<td>时</td>'

				,'<td><table>'

					,'<tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>'

					 ,'<tr><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td></tr>'

					 ,'<tr><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td></tr>'

					,'<tr><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td></tr>'

					 ,'</table></td>'

			,'</tr>'

			,'<tr><td colspan="2"><hr></td></tr>'

			,'<tr>'

				,'<td>分</td>'

				,'<td><table>'

						,'<tr><td>0</td><td>5</td><td>10</td><td>15</td><td>20</td><td>25</td></tr>'

						,'<tr><td>30</td><td>35</td><td>40</td><td>45</td><td>50</td><td>55</td></tr>'

					,'</table></td>'

			,'</tr>'

			,'<tr><td> </td><td align="right"><a href="javascript:void(0)">确定</a></td></tr>'

		,'</table>'

	].join('');

	

	// 默认设置

	var defOptions = {

		// 偏移量

		offsetX:0

		,offsetY:22

		// 格式化输出

		,format:'hh:mm'

		// 样式

		,css:{'cursor':'pointer'}

		// 点确定触发的事件

		,onOK:function(val,target){

			target.val(val);

		}

	}

	

		

 	$.fn.timepick = function(options,param){

 		options = options || {};

 		return this.each(function(){

			var state = $.data(this, 'timepick');

			// 如果已经存在,只设置options

			if (state){

				$.extend(state.options, options);

			} else { // 如果不存在根据当前dom节点绑定timepick参数

				state = $.data(this, 'timepick', {

					options: $.extend({}, defOptions, options)

				});

				

				init(this);

			}

			// 设置当前dom样式

			$(this).css(state.options.css);

 		})

 	}

 	

 	// 初始化

 	function init(target){

		initPanel(target);

		initEvent(target);

 	}

 	

 	// 初始化事件

 	function initEvent(target){

		$(target).click(function(event){

 			currentTarget = target;

 			loadValue(target);

			showTimePanel(target);

		});

 	}

 	

 	// 创建面板

 	function initPanel(target){

 		if(!$timePanel){

 			// 创建一个一行三列的表格

 			var $table = createTable(target);

 			

 			$timePanel = createPanel($table);

 			

 			$('body').append($timePanel);

 		}

 	}

 	

 	function createTable(target){

 		// 创建表格

		var $table = $(timeTablelHtml);

		var $subTables = $table.find('table');

		

		var $hourTable = $subTables.eq(0);

		var $minuteTable = $subTables.eq(1);

		

		$hourTDs = $hourTable.find('td');

		$minuteTDs = $minuteTable.find('td');

		

		initId($hourTDs,$minuteTDs);

		

		$hourTDs.click(function(){

			setHour($(this).html());

		});

			

		$minuteTDs.click(function(){

			setMinute($(this).html());

		});

		

		$table.find('a').click(function(){

 			okHandler();

 		});

 		

 		initCss($table,$hourTDs,$minuteTDs);

		

		return $table;

 	}

 	

 	function initCss($table,$hourTDs,$minuteTDs){

 		$table.css({'font-size':'12px','text-align':'center'});

 		$table.find('hr')

 			.css({height:'0px'

 			,'border-top':'1px solid #c8cacc'

 			,'border-right':'0px'

 			,'border-bottom':'0px'

 			,'border-left':'0px'});

 			

 		var $subTables = $table.find('table');

 		

 		$subTables.find('td').css({

			'cursor':'pointer'

			,'font-size':'12px'

			,'text-align':'center'

			,'padding':'2px 4px 2px 4px'

		});

		

 		$minuteTDs.css({'color':'#e02d2d'});

 		

 		$table.find('a').css({

 			color: '#329ECC'

 			,'text-decoration': 'none'

 		});

 	}

 	

 	function setHour(val){

 		$hourTDs.css({'background-color':'#fff'});

		getHourTD(val).css({'background-color':'#95b8e7'});

		currentTarget.hourVal = val;

 	}

 	

 	function setMinute(val){

 		$minuteTDs.css({'background-color':'#fff'});

		getMinuteTD(val).css({'background-color':'#95b8e7'});

		currentTarget.minuteVal = val;

 	}

 	

 	function getHourTD(val){

 		return $('#'+hourTdIdPrefix + val);

 	}

 	

 	function getMinuteTD(val){

 		return $('#'+minuteTdIdPrefix + val);

 	}

 	

 	function initId($hourTDs,$minuteTDs){

 		$hourTDs.each(function(){

 			$(this).attr('id',hourTdIdPrefix + $(this).html());

 		});

 		$minuteTDs.each(function(){

 			$(this).attr('id',minuteTdIdPrefix + $(this).html());

 		});

 	}

 	

 	function createPanel($table){

 		var $panel =  $('<div class="timepick"></div>').css({

			display:"none"

			,position:"absolute"

			,'background-color':'#fff'

			,border:'1px solid #ccc'

			,'padding':'5px'

		});

 			

 		$panel.append($table);

 		

 		return $panel;

 	}

 	

 	

 	// 显示面板

 	function showTimePanel(target){

 		var targetOffset = $(target).offset();

 		var timepick = $.data(target).timepick;

 		

        $timePanel.offset({top: (targetOffset.top + timepick.options.offsetY)

        	, left: (targetOffset.left + timepick.options.offsetX)});

        

 		$timePanel.show();

 	}

 	

 	// 关闭面板

 	function hideTimePanel(){

 		 $timePanel.offset({top: 0, left: 0 });

 		 $timePanel.hide();

 	}

 	

	/**

	 * 格式化日期<br>

	 * 使用方法:

	 * <code>

	 * var dateStr = format(new Date(),'yyyy-MM-dd hh:mm:ss.S');

	 * </code>

	 * 

	 * @param dateInstance Date实例

	 * @param 格式化字符串,如"yyyy-MM-dd","yyyy-MM-dd hh:mm:ss.S"

	 * 

	 * @return 返回格式化后的字符串

	 */

	function format(dateInstance,pattern) {

		var o = {   

			"M+" : dateInstance.getMonth()+1,                 //月份    

			"d+" : dateInstance.getDate(),                    //日    

			"h+" : dateInstance.getHours(),                   //小时    

			"m+" : dateInstance.getMinutes(),                 //分    

			"s+" : dateInstance.getSeconds(),                 //秒    

			"q+" : Math.floor((dateInstance.getMonth()+3)/3), //季度    

			"S"  : dateInstance.getMilliseconds()             //毫秒    

		};   

		if(/(y+)/.test(pattern)) {

			pattern = pattern.replace(RegExp.$1, (dateInstance.getFullYear()+"").substring(4 - RegExp.$1.length));   

		}

			

		for(var k in o) {

			if(new RegExp("("+ k +")").test(pattern)) {

				pattern = pattern.replace(RegExp.$1, (RegExp.$1.length == 1) 

					? (o[k]) 

					: (("00"+ o[k]).substring((""+ o[k]).length))); 

			}

		}

			

		return pattern; 

	}

 	

 	// 确定事件句柄

 	function okHandler(){

		var currentTimepick = $.data(currentTarget).timepick;

 		var onOK = currentTimepick.options.onOK;

 		

 		if($.isFunction(onOK)){

 			var hourVal = currentTarget.hourVal || '0';

 			var minuteVal = currentTarget.minuteVal || '0';

 			// 格式化输出

 			// 获取<select>标签,第一个是小时,第二个分

	 		var val = formatValue(currentTimepick.options.format,hourVal,minuteVal);

	 		onOK(val,$(currentTarget));

 		}

 		

 		hideTimePanel();

 	}

 	

 	function formatValue(formatStr,hourVal,minuteVal){

 		// 借用Date对象赋值,进行后续的格式化

 		date.setHours(hourVal); // 时

 		date.setMinutes (minuteVal); // 分

 		

 		return format(date,formatStr);

 	}

 	

 	function loadValue(target){

 		var hourVal = target.hourVal || '00';

 		var minuteVal = target.minuteVal || '00';

 		

 		setHour(hourVal);

 		setMinute(minuteVal);

 	}

 	

 	

 	function formatNum(num){

 		return num < 10 ? "0" + num : num;

 	}

 	

 	// 点击空白地方隐藏面板

 	$(document).click(function(e){

 		if($timePanel){

 			var obj = e.target;

 			

		    var isOutSide = $(obj).parents('.timepick').length == 0;

		    var notCurrentTarget = (obj != currentTarget);

		    // 鼠标点空白地方并且没有点在输入框上

		    if(isOutSide && notCurrentTarget){

		    	hideTimePanel();

		    }

		}

	});

 	

 	

})(jQuery);
scscms太阳光 2014-08-13
  • 打赏
  • 举报
 回复 
几个bug:
1、点击输入框直接确定，显示00：00。再次点击时不会自动选中0、0。非得点击的才可记住。
2、如果手动修改了值，仍记忆是点击的数字。明显是不是读取文本框的值。硬性记录点击的值不够灵活。
3、文本框中输入，但没有自动纠正功能。
建议输入框添加自动纠正功能，点击是自动读取文本框内值来高亮，代码要大大精简。
qqm05 2014-08-13
  • 打赏
  • 举报
 回复
网上有好的时间选择控件了，基于 jQuery UI Datepicker：
js及css下载地址：
http://trentrichardson.com/examples/timepicker/

效果图：


猿敲月下码 2014-08-13
  • 打赏
  • 举报
 回复
引用 6 楼 apollokk 的回复:
还好，1到4分手输入？
看项目需求了,5分钟一个时段应该足够了 QQ备忘录里面的时间是30分钟一个时段
猿敲月下码 2014-08-12
  • 打赏
  • 举报
 回复
引用 3 楼 wzs_xyz 的回复:
我只是来接分，分享精神可嘉
猿敲月下码 2014-08-12
  • 打赏
  • 举报
 回复
引用 1 楼 xzy21com 的回复:
操作会增加负担。不如直接一个输入框，离开焦点自动格式化纠正。
这样也可以,一个是键盘输入,一个鼠标输入,就看用户喜欢哪一种了
scscms太阳光 2014-08-12
  • 打赏
  • 举报
 回复
操作会增加负担。不如直接一个输入框，离开焦点自动格式化纠正。
基于jQuery的日期选择控件
终于把jQuery拼写正确了哈，哈哈javascript也是区分大小写的,所以确实不能写错，今天我来和大家分享的是日期选择控件的实现，功能也许不够强大，但是能够满足需求。
jquery 文件批量上传控件
内有Demo，学习不难，上传效果还不错，用户体验效果很好，直接拿来就可以使用了，
HTML5移动端外观时尚的日期时间选择控件
之前我们介绍过很多基于jQuery的日期时间选择控件，比如这款基于Bootstrap和jQuery的日历控件和日期选择插件，也介绍过一些基于HTML5和CSS3的日历控件，比如这款华丽的HTML5日期选择器。今天我们要分享一款基于HTML5的移动端日期时间选择控件，它的外观比较特别，适合移动设备中使用，当然PC端用起来也非常不错。
[分享]精心收集的3款JavaScript实现的日期时间选择控件(示范Demo)
[分享]精心收集的3款JavaScript实现的日期时间选择控件
jquery ui利用datepicker插件实现日期控件
NULL 博文链接：https://tanling514.iteye.com/blog/2193466
JavaScript

87,996

社区成员

224,708

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章