分享一个时间选择控件,基于jquery-CSDN论坛

CSDN论坛 > Web 开发 > JavaScript

分享一个时间选择控件,基于jquery [问题点数：100分，结帖人thc1987]

⋅【分享】一个简单易用的接口开放平台 ⋅[分享]一个基于velocity模板引擎的代码生成器 ⋅分享一个时间选择控件,基于jquery 更多帖子 关注空间博客 axe 本版专家分：5177 结帖率 98.99%

最近在项目中需要用到一个时间选择控件,只有小时分钟的那种
网上找了不太理想,于是自己做了一个.不是很难,采用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>

0 2014-08-12 15:53:09

回复数 16 只看楼主引用举报楼主

⋅论坛的博客出问题了，拿谁去祭天？ ⋅vue火了这么久，您还在用jQuery吗？ ⋅Vue2.0开发全家桶！ 更多帖子 关注空间博客 scscms太阳光 本版专家分：30185 黄花 2012年12月 Web 开发大版内专家分月排行榜第二 2012年11月 Web 开发大版内专家分月排行榜第二: 操作会增加负担。不如直接一个输入框，离开焦点自动格式化纠正。

0 2014-08-12 16:00:43

只看TA 引用举报 #1 得分 20

几款实用的前端日历时间日期选择控件 1.Bootstrap的datetimepicker具体用法：https://blog.csdn.net/lianzhang861/article/details/804197752.layui-laydate具体用法：https://blog.csdn.net/lianzhang861/article/details/804228793.My97DatePicker-WdatePicker具体用...

⋅【分享】一个简单易用的接口开放平台 ⋅[分享]一个基于velocity模板引擎的代码生成器 ⋅分享一个时间选择控件,基于jquery 更多帖子 关注空间博客 axe 本版专家分：5177: 引用 1 楼 xzy21com 的回复:
操作会增加负担。不如直接一个输入框，离开焦点自动格式化纠正。

这样也可以,一个是键盘输入,一个鼠标输入,就看用户喜欢哪一种了

0 2014-08-12 16:15:58

只看TA 引用举报 #2 得分 0

时间控件（选择时间范围的插件）后台开发，一般都是有筛选条件的查询，那么问题就来了，根据日期范围搜索的情况下，插件要怎么选？？？？这个是最开始，我采用的是两个时间插件，其他也没啥，就是运营部门使用起来可能感觉太麻烦，为啥不能一次让我选了，还有说老是忘记选择结束时间，然后就有了我接下来的工作。。。在此，给大家推荐一款很好使用的日期与时间组件...

⋅【分享】一个简单易用的接口开放平台 ⋅[分享]一个基于velocity模板引擎的代码生成器 ⋅分享一个时间选择控件,基于jquery 更多帖子 关注空间博客 axe 本版专家分：5177: 引用 3 楼 wzs_xyz 的回复:
我只是来接分，分享精神可嘉

0 2014-08-12 16:36:08

只看TA 引用举报 #4 得分 0

HTML5新控件 - 日期和时间选择输入版权声明：本文为博主原创文章，未经博主允许不得转载。 HTML5定义了几个与日期有关的新控件。支持日期控件的浏览器会提供一个方便的下拉式日历，供用户选择。注意：目前只有Chrome和Opera提供下拉式日历支持，其它浏览器仍是一个普通文本框。 1，日期控件 - date type="date" value="2015-09-24"/>1 2，时间控件

⋅【分享】一个简单易用的接口开放平台 ⋅[分享]一个基于velocity模板引擎的代码生成器 ⋅分享一个时间选择控件,基于jquery 更多帖子 关注空间博客 axe 本版专家分：5177

做了下改进,优化交互,主要是用户点击次数变少了
效果图

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>&nbsp;</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);

0 2014-08-13 12:00:05

只看TA 引用举报 #5 得分 0

⋅为啥我三天两头的看见这图，运气不好么？ ⋅SQL2014排序自动匹配表别名 ⋅整数除法中最小余数是1还是0？ 更多帖子 关注空间博客 Hello World, 本版专家分：14206 黄花 2019年1月 Web 开发大版内专家分月排行榜第二 蓝花 2019年4月 Web 开发大版内专家分月排行榜第三: 还好，1到4分手输入？

0 2014-08-13 12:24:34

只看TA 引用举报 #6 得分 20

推荐个不错的日期/时间选择控件 http://home.jongsma.org/software/js/datepicker 不但可以选择时间,还可以选择时间,关键是界面设计的很好,不会因为选择时间把节目弄得很混乱是基于prototype写的..使用的时候还需要引入两个prototype到扩展类,网站都提供有下载. 支持语言扩展,我写了一个,有需要的拿去! [code="javascript"] 'zh':{ ...

⋅【分享】一个简单易用的接口开放平台 ⋅[分享]一个基于velocity模板引擎的代码生成器 ⋅分享一个时间选择控件,基于jquery 更多帖子 关注空间博客 axe 本版专家分：5177: 引用 6 楼 apollokk 的回复:
还好，1到4分手输入？

看项目需求了,5分钟一个时段应该足够了
QQ备忘录里面的时间是30分钟一个时段

0 2014-08-13 13:51:27

只看TA 引用举报 #7 得分 0

带你轻松搞定时间选择控件原理说到这个时间选择控件，网上有很多各式各样的，相信很多同学们也都有用过，所以大家对这个也不陌生。虽然大家都用过这个时间选择控件，但是却很少有人去研究其中原理。最近本人利用闲暇时间自己写了一个时间选择控件，借这个时间选择控件向各位同学们阐述这个时间选择控件的原理。如果同学们喜欢我的文章，麻烦给个赞哦！不胜感激！

⋅构造函数不执行，求教！！！ ⋅MVC Route 加后缀(.html)出现404 错误 ⋅下载附件提示如下错误：来自服务器的响应包含重复标头 更多帖子 关注空间博客 qqm05 本版专家分：2935: 网上有好的时间选择控件了，基于 jQuery UI Datepicker：
js及css下载地址：
http://trentrichardson.com/examples/timepicker/

效果图：

0 2014-08-13 14:11:40

只看TA 引用举报 #8 得分 20

jquery.datepick获取日期控件选中日期的值 $("#id").datepick(‘getDate’); 运用.datepick(‘getDate’)方法即可。提一下，本人前面中一直用onblur属性（失去焦点触发）结果每次获取的都是输入框的值，而不是我组件中选的值（不管我选没选日期，第一个值一直是null）改成onchange属性监听，问题解决 ...

⋅论坛的博客出问题了，拿谁去祭天？ ⋅vue火了这么久，您还在用jQuery吗？ ⋅Vue2.0开发全家桶！ 更多帖子 关注空间博客 scscms太阳光 本版专家分：30185 黄花 2012年12月 Web 开发大版内专家分月排行榜第二 2012年11月 Web 开发大版内专家分月排行榜第二

几个bug:

1、点击输入框直接确定，显示00：00。再次点击时不会自动选中0、0。非得点击的才可记住。

2、如果手动修改了值，仍记忆是点击的数字。明显是不是读取文本框的值。硬性记录点击的值不够灵活。

3、文本框中输入，但没有自动纠正功能。

建议输入框添加自动纠正功能，点击是自动读取文本框内值来高亮，代码要大大精简。

0 2014-08-13 21:15:50

只看TA 引用举报 #9 得分 0

jquery-ui datepicker 日期控件日期区间选择 1. 依赖文件 jquery , jquery-ui.min.css,jquery-ui.min.js 2. html 从到 3. js $( "#fromData" ).datepicker({ language: 'cn', //汉化 changeMonth: true, minDate

⋅【国际惯例陞星散分】 ⋅【散分贴】 ⋅【国际惯例】生星散分... 更多帖子 关注空间博客 hookee 本版专家分：187869 进士 2009年总版技术专家分年内排行榜第七 金牌 2009年9月总版技术专家分月排行榜第一 银牌 2009年8月总版技术专家分月排行榜第二 红花 2011年11月 Web 开发大版内专家分月排行榜第一 2009年10月 Web 开发大版内专家分月排行榜第一 2009年9月 Web 开发大版内专家分月排行榜第一 2009年8月 Web 开发大版内专家分月排行榜第一 2009年7月 Web 开发大版内专家分月排行榜第一 2009年6月 Web 开发大版内专家分月排行榜第一 2007年7月 Web 开发大版内专家分月排行榜第一 2007年6月 Web 开发大版内专家分月排行榜第一: 支持一下...

0 2014-08-14 00:42:22

只看TA 引用举报 #10 得分 20

码无边 本版专家分：1380 版主 黄花 2014年1月 PHP大版内专家分月排行榜第二 2013年12月 PHP大版内专家分月排行榜第二 蓝花 2014年11月 PHP大版内专家分月排行榜第三 2014年6月 PHP大版内专家分月排行榜第三 2014年4月 PHP大版内专家分月排行榜第三 2014年2月 PHP大版内专家分月排行榜第三 2013年11月 PHP大版内专家分月排行榜第三: 原创的东西不错，但是开源的插件，用起来也很方便。

0 2014-08-14 10:33:56

只看TA 引用举报 #11 得分 20

基于JQuery的移动端地址选择基于JQuery的移动端地址选择

引用 9 楼 xzy21com 的回复:

几个bug:

1、点击输入框直接确定，显示00：00。再次点击时不会自动选中0、0。非得点击的才可记住。

2、如果手动修改了值，仍记忆是点击的数字。明显是不是读取文本框的值。硬性记录点击的值不够灵活。

3、文本框中输入，但没有自动纠正功能。

建议输入框添加自动纠正功能，点击是自动读取文本框内值来高亮，代码要大大精简。

谢谢反馈~

0 2014-08-14 16:02:08

只看TA 引用举报 #12 得分 0

时间选择控件转载 https://blog.csdn.net/u014608640/article/details/77588057截图TYPE_ALLTYPE_YMDHMTYPE_YMDHTYPE_YMDTYPE_HM效果DateTypeTYPE_ALL--年、月、日、星期、时、分TYPE_YMDHM--年、月、日、时、分TYPE_YMDH--年、月、日、时TYPE_YMD--年、月、日TYPE_HM...

Mr-Hero 本版专家分：227: 支持楼主，支持原创，顺便接分来了

0 2014-08-14 16:16:11

只看TA 引用举报 #13 得分 0

推荐几个选择时间.日期的免费插件 js moment.jshttp://www.layui.com/laydate/http://momentjs.cn/docs/

⋅为啥我三天两头的看见这图，运气不好么？ ⋅SQL2014排序自动匹配表别名 ⋅整数除法中最小余数是1还是0？ 更多帖子 关注空间博客 Hello World, 本版专家分：14206 黄花 2019年1月 Web 开发大版内专家分月排行榜第二 蓝花 2019年4月 Web 开发大版内专家分月排行榜第三: 引用 8 楼 qqm05 的回复:
网上有好的时间选择控件了，基于 jQuery UI Datepicker：
js及css下载地址：
http://trentrichardson.com/examples/timepicker/

效果图：

这个时间选择挺不错的，不知能不能把日期部份去掉？

0 2014-08-14 16:49:26

只看TA 引用举报 #14 得分 0

Jquery日期选择组件效果图如下：项目目录结构如下：DateComponent.css代码如下：#dateBoardTitle tr td{padding: 10px 0px} #dateBoard tr td{padding:3px 0px} #date-view{background-color:white;position:absolute;bottom:0px;left:0px;right:0px;} #dat...

⋅构造函数不执行，求教！！！ ⋅MVC Route 加后缀(.html)出现404 错误 ⋅下载附件提示如下错误：来自服务器的响应包含重复标头 更多帖子 关注空间博客 qqm05 本版专家分：2935

引用 14 楼 apollokk 的回复:

Quote: 引用 8 楼 qqm05 的回复:

网上有好的时间选择控件了，基于 jQuery UI Datepicker：
js及css下载地址：
http://trentrichardson.com/examples/timepicker/

效果图：

这个时间选择挺不错的，不知能不能把日期部份去掉？

可以



        $(".datepicker").datetimepicker({

            timeOnly: true,//只选择时间

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

            timeText: '时间',

            hourText: '小时',

            minuteText: '分钟',

            secondText: '秒',

            currentText: '现在',

            closeText: '完成',

            showSecond: true, //显示秒  

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

            dateFormat: 'yy-mm-dd'

        });

0 2014-10-08 15:01:58

只看TA 引用举报 #15 得分 0

⋅c++的char *怎么转换为c#中的数据类型 ⋅c#调用c++出现异常 ⋅C#怎么调用C++的dll，dll函数的输入类型是Mat（或者是const char*） 更多帖子 关注空间博客 pixian0237 本版专家分：0

引用 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>&nbsp;</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)

        }});

    })"/>

这样吗？就是在输入框里面，在点击事件触发函数吗

0 2017-01-06 17:11:33

只看TA 引用举报 #16 得分 0

My97DatePicker 时间选择插件很好的一个时间选择插件很好的一个时间选择插件很好的一个时间选择插件很好的一个时间选择插件

收藏帖子

时间选择器: 这是一个时间选择控件，仿ios，效果很不错！

基于jQuery的三级联动控件: 三级联动控件在日常开发中经常会用到，比如选择省市区，年月日等情况，而原生的html并没有这样的一个控件，闲暇之余，写了这么一个控件，预览效果如下：废话不多说，直接贴代码： jquery.dropmenu.css.dropmenu { width: auto; height: auto; } .dropmenu > .top { position: relative;

Android之日期时间选择控件DatePicker和TimePicker: 这个月根据需求在项目中做了一个时间选择器，虽然没有用到Android原生的时间选择控件，但我羞愧地发现自己竟然从来没有用过这方面控件！趁现在有时间，赶紧查缺补漏，写一篇博客吧。（注：为了便于区分，本文将选择年月日的控件称为日期选择控件，将选择时分的控件称为时间选择控件。）1、创建项目新建一个项目，MainActivity的布局如下：<LinearLayout xmlns:android="http:

根据时间控件选择某一天的时间，得到这个日期所在的周: 时间控件用的iview日期选择器： //获取当前日期所在周 getWeekAry(datestr) { var date = new Date(datestr); var weeknum = date.getDay(); //返回一周的某一天数字。（0-6） if (weeknum == 0) { we...

andriod studio 时间选择控件的使用: 首先是布局文件activity_main.xml&lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" and...

Android 好看的自定义滚动式日期选择控件: 最近接触了日期选择的功能，那么肯定得需要一个日期选择控件，Android 系统有自带的 DatePicker 控件，但是不说这个控件有多难看吧，现在 Android 手机版本那么多，用户弹出来的控件五花八门的也不太好，所以只好走自定义的道路了。先是在网上找了一些demo看了看，发现不是很满足自己的需求，但是又懒得自己从头写，就找了一个还不错的demo，对代码进行了一些简化，并添加了一些...

HTML 选择浏览器自带日期控件: 给大家推荐个靠谱的公众号程序员探索之路，大家一起加油在很多页面和web应用中都有输入日期和时间的地方，最典型的是订飞机票，火车票，酒店，批萨等网站。在HTML5之前，对于这样的页面需求，最常见的方案是用Javascript日期选择组件。这几乎是无可争议、别无选择的做法。你可以在搜寻一下“javascript 日期选择框”，会发现有无数的可选择的JavaScript组件。大部分这些日期选择...

基于jquery-ui的中文版时间段选择插件: 基于jquery-ui的时间段选择插件，已经实现汉化，可以选择到具体天数，不能选择时、分、秒。

github上的一些js及jq插件分享: 中华人民共和国行政区划代码 via使用 zTree 实现的行政区划树形列表 via最新最全的城市三级联动插件 via{ps: 这个项目中不仅有三级联动还包括了轮播标签页滚动条下拉框滑动条对话框倒计时图片聚焦搜索建议浮动菜单日历格式化输入框手风琴等} 某位聚聚的 web 组件库熊先生的营地 // 后续会接着添加

jquery移动端日期选择插件: jquery移动端日期选择插件

十、jquery-ui datepicker实现选择一周的日期: html页面： <!DOCTYPE html> </scrip

基于Jquery的模态弹窗控件: 基于Jquery的模态弹窗控件基于Jquery的模态弹窗控件基于Jquery的模态弹窗控件基于Jquery的模态弹窗控件基于Jquery的模态弹窗控件基于Jquery的模态弹窗控件基于Jquery的模态弹窗控件基于Jquery的模态弹窗控件

前端之路：bootstrap 时间日期日历控件（datetimepicker）: Bootstrap datetimepicker控件的使用 1.支持日期选择，格式设定 2.支持时间选择 3.支持时间段选择控制 4.支持中文涉及的样式及js: 云加速外联即可。(moment-with-locales.js 这个得在datatimpicker.min.js之前。可以网上百度这个文件。我没找到这个cdn) &lt;link href="https://cdn.b...

C# 自定义控件，日期时间选择输入插件: C# 自定义控件，日期时间选择输入插件

日期时间范围选择插件-daterangepicker使用总结: 分享说明: 　　项目中要使用日期时间范围选择对数据进行筛选;精确到年月日时分秒;起初,使用了layui的时间日期选择插件;但是在IIE8第一次点击会报设置格式错误;研究了很久没解决,但能确定不是layui的问题;因为自己写的demo可以在IE8运行;只是在我的项目环境下某些代码冲突了;所以换用了bootstrap插件daterangepicker;看了很多资料;结合官网了文档;基本算是搞定了;

一个完善的日期选择控件: 一个完善的日期选择控件

好用的日期选择插件推荐，可精确到时分秒: jeDate日期控件文档地址

jquery 时间选择控件: 确实比较好用一个时间选择控件，不过目前只能选择当前日期之后的日期

Jquery日期时间选择控件: Jquery日期时间选择控件,Jquery日期时间选择控件

JS时间滑条控件（timeSlider）: 本应用在TigraSlider滑条控件的基础上，扩展了时间滑条的功能。扩展了两个JS方法：（1）任一整数转换成时间格式字符串函数：intToTime() （2）将时间格式字符串转换成整数函数：timeToInt() TigraSlider示例请参照：demo.html 时间滑条控件示例请参照：timeSlider.html

jquery easyui 周历周选择下拉控件: 基于jquery easyui改造的周选择控件 可指定周起始星期，默认周日为本周的第一天

日期时间选择控件（可以只显示日期选择或者只显示时间选择）: 可以直接在项目中使用的日期时间选择DEMO，demo结构简单

移动端日期时间选择控件: 移动端日期时间选择控件

精心挑选12款优秀的 JavaScript 日历和时间选择插件: 1. The Coolest Calendar 界面非常漂亮的一款日期选择插件，有详细的使用文档，最新版本 1.5。点击下载查看示例 2. DatePicker 这款日期插件支持单选、多选和时间区间选择，功能齐全，有 Dialog 和 Flat 两种模式。点击下载查看示例 3. Tigra Calendar Ti

JS 日期时间选择控件: /**//***本日历选择控件由tiannet根据前人经验完善而得。大部分代码来自meizz的日历控件。*tiannet添加了时间选择功能、select,object标签隐藏功能，还有其它小功能。*使用方法：* (1)只选择日期 &lt;input type="text" name="date" readOnly onClick="setDay(this);"&gt;* (2)选择日期和小时 &...

facebox1.2 基于jQuery的控件: facebox1.2 基于jQuery的控件 facebox1.2 基于jQuery的控件 facebox1.2 基于jQuery的控件

jquery-timepicker时分控件，只选择时分: 百度网盘下载：demo以及js,css https://pan.baidu.com/s/1bhgBYuTtz3BfM_ECao8elA

JQuery---选择年月的插件: 共享一个之前写的简单位的，选择年月的插件 SimpleCanleder.js ; (function($) { $.simpleCanleder = function(box, options){ var _canlederBox = "#SimpleCanleder_Year_Month"; var _title_ul_li = ".title li"; box = $(box);

jquery双列选择插件: 自己写的双列表选择器插件。插件依赖jquery。js：(function ($, window, document, undefined) { //定义pickList的构造函数 var PickList = function (ele, opt) { this.$element = ele, this.defaults = { ...

JQuery--只选择年月的日期控件: JQuery--只选择年月的日期控件,支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+

时间日期选择控件DateTimePicker: 项目中需要使用一个日期时间选择弹窗。因为系统的日期选择和时间选择是分开的，而且显示效果与要求不一致，因此自定义时间日期弹窗。思路：这种时间日期选择控件，与系统的有些差别，因此，需要重新设计。不论是年月日，还是时分秒的单个选择的控件，都是一个数字滚轮的模式。因此基于系统的NumberPicker组件的基础上进行开发。 1、NumberPicker。系统的数字选择器没

常用控件：时间选择框: 一：时间选择框 1.时间选择框onfocus/onclick : WdatePicker({}) 此插件显示日历选择框，可通过属性控制显示范围，周末亮显，显示皮肤等（1）使用js文件 WdatePicker.js 配置文件,在调用的地方仅需使用该文件 calendar.js 日期库主文件（2）常用模式 $wdate=true时,在input里加上class

自定义时间选择控件（仿ios滚动效果）: 1.先上自定义的控件： /** * 滚轮选择器 * author LH * data 2016/8/20 17:26 */ public class WheelView extends View { public static final String TAG = "WheelView"; /** * 自动回滚到中间的速度 */ publi

Jquery 日期选择控件: 我们在写HTML时，有时候要用到输入日期的文本框，比如：注册信息时，这时我们输入日期大多需要手动输入，这样显得很不方便，并且传到后台时有时候格式不对，有没有控件来让输入日期更方便呢？在这里我向大家介绍一个工具，它可以帮助我们很方便的完成输入日期，并可以自定义格式 The jQuery Plugin Registry 这个网站有许多的jquery 插件我们的日期插件就在其中我们搜索 jQue

android日期选择控件DatePicker小结: 最近手上的项目要求弄一个包含两个日期选择控件的UI界面（即开始时间和结束时间）。一、一开始就想到使用自带的DatePicker控件。但是发现其UI很难调整到项目想要的效果。尤其是其与项目theme的关系，在xml中设置style也不好使。从Popwindow到AlertDialog都试过了，只有含单个DatePicker的DateAlertDialog还比较赏心悦目，却不满足项目需要。

VC/MFC CStatic绘制一个时间选择控件: 从CStatic类中派生的一个子类，子类中实现了一个时间选择模式的控件

jQuery日期时间范围选择插件设置日期范围选择代码: jQuery日期时间范围选择插件设置日期范围选择代码 jQuery日期时间范围选择插件设置日期范围选择代码

jquery,html5可滑动手机日期选择插件: jquery,html5可滑动手机日期选择插件

jquery插件，选取月份，只选取到月: jquery插件，选取月份，只选取到月，提供给需要的朋友们

jQuery 时间控件推荐: My97DatePicker My97DatePicker是一个更全面，更人性化，并且速度一流的日期选择控件。具有强大的日期范围限制功能；自定义事件和丰富的API库；多语言支持和自定义皮肤支持；跨无限级框架显示和自动选择显示位置。My97DatePicker JS Calendar JS Calendar是一个支持多种浏览器，多种语言的日历控件。JS Calenda

前端开发之日期控件、HTML5日期输入类型(date): 在很多页面和web应用中都有输入日期和时间的地方，最典型的是订飞机票，火车票，酒店，批萨等网站。在HTML5之前，对于这样的页面需求，最常见的方案是用Javascript日期选择组件。这几乎是无可争议、别无选择的做法。你可以在搜寻一下“javascript 日期选择框”，会发现有无数的可选择的JavaScript组件。大部分这些日期选择组件都提供将日期填充到指定的输入框里的功能。日

bootstrap-datetimepicker 日期控件的开始日期: 今天做日期控件，需求要求设置一个时间范围限制，选择从今天开始的日期才可以选择，今天以前都不可以选择 主要体现在bootstrap-datetimepicker控件下面的2个日期参数 weekStart: 1, startDate:new Date(日期), 引用的基础库有 script type="text/javascript" src="./jquery/jquery

关于 Vue.js+Element-UI 日期控件日期范围选择: 也就是说前面时间框的时间能选的范围应该小于等于后面的时间框; 后面时间框能选的范围应该大于等于前面的时间框;

仿Timely时间选择控件: Timely简介焕彩闹钟是一款专为Android设计的华丽时钟，这款软件拥有惊艳的用户体验和革命性的云服务支持，允许对闹钟数据的备份从而在不同设备之间同步。设置闹钟从未如此简单：只需从屏幕的边缘滑过，再通过拖动便可设置所需的闹钟时间。单次点击可进行以5分钟为单位的微调。舒心的叫醒体验：精心打造的高品质闹铃和创新的智能叫醒功能，让您在早上醒来时神清气爽。您的品味，您的风格：从我们绚丽

jquery 时间选择插件-jedate: 引言日期选择插件有很多，今天说一说jedate　源代码 github 快速上手使用对象使用方

jquery日期日历插件单击文本框弹出日期选择控件: jquery date选择日历控件鼠标点击text文本框弹出日期选择 单击文本框弹出日期选择控件 实用的日历效果，兼容性好。

jQuery+jRange数值范围选择控件_鼠标拖动数值范围: 本文用两个例子向大家介绍一款范围选择器插件jRange。老惯例引入jQuery库文件及jRange插件。 rel="stylesheet" href="jquery.range.css"> src="jquery.js"> src="jquery.range.js"> 然后我们放两个demo。第一个demo只可以滑动结束点，第二个可以滑动开始点和结束点。

jquery日期控件（有下拉菜单选择年份）: 这是我修改过的jquery的date_input日期选择控件，可以使用下拉菜单的方式选择年份，除去了原有控件选择年份采用点击方式所带来的烦恼。压缩包内含有代码以及压缩过的js。

jQuery日期选择插件: 简单实用蓝色jQuery日期选择插件。使用jquery进行日期事件

基于JQuery的时间选择控件: 基于JQuery的时间选择控件 点击下载：下载

9 款样式华丽的 jQuery 日期选择和日历控件: 现在的网页应用越来越丰富，我们在网页中填写日期和时间已经再也不用手动输入了，而是使用各种各样的日期时间选择控件，大部分样式华丽的日期选择和日历控件都是基于jQuery和HTML5的，比如今天要分享的这9款日期选择控件，漂亮的UI外观加上人性化的操作设计，大大提高了用户体验，让我们一起来欣赏一下吧。1、HTML5移动端外观时尚的日期时间选择控件之前我们介绍过很多基于jQuery的日期时间选择控件，比...

简单的时间段选择控件: 一个简单的时间段选择控件，可以选择本月，近3个月，近6个月，本年度等时间段。 github地址点击打开链接

DatePicker - 日期选择插件: http://www.cnblogs.com/xiaoyao2011/archive/2011/10/23/JSDatePicker.html 在一些WEB系统中，日期选择插件必不可少的功能，今天为大家分享几个不错的日期选择插件。希望对大家有所帮助。 1)My97DatePicker是一个更全面，更人性化，并且速度一流的日期选择控件。具有强大的日期范围限制功能；

带时间的日期选择web控件: 1,web控件的样子 2,日期时间选择的使用 3,calendar.js的文件 var cal; var isFocus=false; //是否为焦点 function SetDate(obj,strFormat) { var date = new Date(); var by = date.g

一款好用的时间控件（时间选择器）-jeDate: 一款好用的时间控件（时间选择器）-jeDate1、引入jedate.js； 2、上代码1>方法一,isTime:true,format

jQuery的车牌插件: 一款基于jQuery车牌输入插件，网上找到的，自己用着挺好的，分享给大家！

Jquery设置选择时间: function initBaseBind() { var options = { format: 'yyyy-mm-dd hh:ii:00', todayBtn: true, clearBtn: true, minView:true,//设置后不会出现时分秒 startDate: new Date

jquery双日历插件daterangepicker.js设置可选时间时分秒: $('.feed-main .creattime').daterangepicker({ timePicker:true, timePicker12Hour:false, timePickerIncrement:1, format:'YYYY-MM-DD hh:mm' }, function(start, end, label) { $scope.creatt

小时分钟jquery插件: http://www.htmleaf.com/Demo/201608213895.html flatpickr

easyUI自带的时间插件日期选择、月份选择、时间选择的使用: 1.日期选择 只要将class设置成easyui-datebox就可以了，当然前提是已经应用了easyui的js 2.时间选择 默认的时间选择是精确到年月日时分秒的，只要把class设置成easyui-datetimebox就可以实现当然他的效果图是这样的：所以如果需要自定义他的显示格式的话我们需要自己重写他的format方法：（注意下面红色部分需要加进去）da

Web选择日期时间控件: 1、极好的用于WEB页面的选择日期、时间的javascript控件。 2、包含4个javascript函数，其中Calendar.js,CalendarSetup.js是必须的,视情况使用calend

jQuery插件 - 下拉列表日期选择控件: 日期选择在开发中的应用应该是再常见不过的了~以前大多数的日期选择基本上以这种形式体现：图1:图2:但是，在我们经过很多次的使用和用户反馈中得之，这种方式操作不够方便，虽然看起来很直观，但如果是选2009，以“图1”哪种方式就很难操作，需要用户点击好多次才可以选到。图2的还要好些，不过感觉上还是不怎么好。于是，有些网站就出现了以这种形式出现的日期选择控件：另外有一点比较重要的！图一图二的哪种方式，无

Button、选择框、日期、时间控件: 常用控件（二）按钮 1、Button（按钮） Android:text 设置按钮上的文字（ImageButton不能有文字） Android:background 设置按钮的背景颜色 2、imageButton（图片按钮） Android:src 设置背景图片 Android:adjustViewBounts 调整边框以适应图片大小 android:padding　设置图片的

jQuery插件下拉列表日期选择控件: jQuery插件下拉列表日期选择控件

JQuery周历控件: 使用JQuery封装的周历控件，可切换年份月份，选择本周、下一周时间。

自己实现的基于jquery的UI组件库: 在上一家单位做软件开发平台（2012年前的事了），一做就是近5年时间，在离开的最后一段时间，中心觉得应该做一个自己的jquery UI组件库，但是团队中没有NX的JS高人，要招一个合适的做过JS UI组件库的同学实在太难，似乎我的JS水平比他们略高一些，加上我比较好学，喜欢专研技术，不怕苦(自己夸一下自己-:))，因此这个重担就落在我的头上了。由于之前对js、html、css...

jquery.mobiscroll 适合移动端使用的滑动选择控件 -- 自定义选项示例: mobiscroll ：滑动选择 2.13.2版本免费，官网（mobiscroll.com）收费先从官方下载2.13.2体验版下来，查看例子结合官方API学习( http://docs.mobiscroll.com/2-13-2 ) 另外官方还有在线例子： http://demo.mobiscroll.com/mobile/datetime/date/#display=

时间控件：my97DatePicker选择年、季度、月、周、日: 一直以来，用的最多的就是my97DatePicker获得年月日的方法，今天突然逛到了这篇文章，留下来，以备以后使用自己写的一个：获取年月，并从下个月开始计算 [html] view plain copy print?<asp:TextBox ID=“txt_date_1” runat=“server” Width=“90%” onClick=“WdatePicker({dateFmt:’yyyy-M

Ionic时间选择控件: Ionic时间选择插件纯Angular 写的移动端时间选择插件轻巧适用,重写改进后的版本。

日期控件Datepicker: 日期控件 DatePicker 功能说明： 1. 全面的样式 --- 样式定义全面（几乎包括所有项）。 2. 文字字符 --- 可自定义按钮、日历月份、日历星期、日历周上显示的文字字符。 3. 日期格式排版 --- 支持日期编辑框自定义格式更改。 4. 全面的日期输入 --- 支持日期编辑框键盘数字输入，

24款最好的jQuery日期时间选择器插件: 如果你正在创建一个网络表单，有很多事情你需要在你的应用程序中使用。有时您需要特别的输入，从用户的日期和时间，如发票日期，生日，交货时间，或任何其他此类信息。如果你有这样的需要，可以极大地从动态的jQuery日期时间选择器插件效益。有几个jQuery开源插件在网上可以用于此目的的。但由于选择的数量，你可能需要点帮助筛选好于平均。这就是为什么我们必须拿起最有效的jQuery插件为您的形式和网页建设

自己动手丰衣足食之移动端日期选择插件（强烈推荐）: 移动端的日期选择插件相比PC端比较少，主要原因是不同手机浏览器的效果不一样，mobiscroll 太臃肿了，而且不是免费的在此向大家分享一款手机端的日期选择插件https://github.com/xfhxbb/lCalendar，特此向这位雷锋敬意，另一个是移动端城市 选择插件http://blog.csdn.net/libin_1/article/details/50689075或者看看h

jquery动态操作控件,选择器接收变量: Jquery 选择器中使用变量: jquery选择器是接受变量的，用法如下 $('body').on('click', "button[id^='delete']", function () { var id = $(this).parent().siblings()[0].innerHTML; var btn_id = 'd

车牌控件jQuery+js: jQuery+js移动端输入框键盘键入车牌号码特效源码，配置即可用

jquery仿携程网城市选择插件: 效果------- HTML: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 城市搜索 var labelFromcity = new Array(); la

一个自定义时间选择器: 一个自定义时间选择器年月日时分没有秒

jQuery滑动选取数值范围插件: 使用方法HTML首先载入jQuery库文件以及jRange相关的css文件：jquery.range.css和插件：jquery.range.js 然后在需

网页取色器绿色版 exe文件下载: 用鼠标打开exe文件，鼠标按住颜色区域，不放松，然后拖动鼠标，移到所要选的颜色上，软件框里就会自动，显示当前的颜色相关下载链接：[url=//download.csdn.net/download/liutongju/2055910?utm_source=bbsseo]//download.csdn.net/download/liutongju/2055910?utm_source=bbsseo[/url]

eXeScope----------sd下载: eXeScopeeXeScopeeXeScopeeXeScopeeXeScopeeXeScopeeXeScopeeXeScopeeXeScopeeXeScopeeXeScopeeXeScopeeXeScopeeXeScopeeXeScopeeXeScopeeXeScopeeXeScopeeXeScopeeXeScopeeXeScopeeXeScopeeXeScopeeXeScopeeXeScopeeXeScope 相关下载链接：[url=//download.csdn.net/download/vip_love/2171711?utm_source=bbsseo]//download.csdn.net/download/vip_love/2171711?utm_source=bbsseo[/url]

从零开始OPhone游戏编程ophone8下载: 从零开始OPhone游戏编程ophone8，绝对实用。下了一定要顶相关下载链接：[url=//download.csdn.net/download/masaike7529/2241630?utm_source=bbsseo]//download.csdn.net/download/masaike7529/2241630?utm_source=bbsseo[/url]

文章热词设计制作学习 jQuery学习机器学习教程 Objective-C培训交互设计视频教程
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标大数据培训分享大数据分享视频教程

我们是很有底线的