jquery时间选择器

浏览数：265 / 时间：2015年06月09日





<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../resources/css/reset.css" type="text/css"
	media="screen" />
<link rel="stylesheet" href="../resources/css/style.css" type="text/css"
	media="screen" />
<link rel="stylesheet" href="../resources/css/invalid.css"
	type="text/css" media="screen" />
<link rel="stylesheet"
	href="../resources/css/south-street/jquery-ui-1.9.2.custom.css"
	type="text/css" />

<!-- Javascripts -->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.9.2.custom.js"></script>

<!-- date -->
<script type="text/javascript"
	src="../js/jquery.ui.datepicker-zh-CN.min.js"></script>
<script type="text/javascript" src="../js/util/datetwo.js"></script>


<!-- datatables -->
<script type="text/javascript"
	src="../js/datatables/jquery.dataTables.js"></script>
<link rel="stylesheet" href="../resources/css/dataTables.jqueryui.css"
	type="text/css" />
<script type="text/javascript" src="../js/util/datatablesini.js"></script>

</head>
<body>
<div id="testPager"></div>
</body>

<script type="text/javascript">
;(function($){
	var currentDateTime=new Date();
	var hh=currentDateTime.getHours(),mm=currentDateTime.getMinutes(),ss=currentDateTime.getSeconds();
	 //存放插件所需的属性字段
	var TimeDivFields={
			hour:hh,
			min:mm,
			sec:ss,
			showResult:true
	};
	//插件的私有函数
	function getTimeDiv(hh,mm,ss,showResult){
		var selectHtml=‘<div class="ui-datepicker-timepanel ui-widget-content hhmmssDiv">‘;
		selectHtml+=‘<select class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all ui-datepicker-hour" data-event="click">‘;
		for(var h=0;h<24;h++){
			selectHtml+=‘<option ‘+(hh==h?‘selected="selected"‘:‘‘)+‘>‘+(((h+"").length<2)?("0"+h):h)+‘</option>‘;
		}
		selectHtml+=‘</select>小时<select class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all ui-datepicker-min" data-event="click">‘;
		for(var m=0;m<60;m++){
			selectHtml+=‘<option ‘+(mm==m?‘selected="selected"‘:‘‘)+‘>‘+((m+"").length<2?"0"+m:m)+‘</option>‘;
		}	
		selectHtml+=‘</select>分钟<select class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all ui-datepicker-sec" data-event="click">‘;
		for(var s=0;s<60;s++){
			selectHtml+=‘<option ‘+(ss==s?‘selected="selected"‘:‘‘)+‘>‘+((s+"").length<2?"0"+s:s)+‘</option>‘;
		}	
		selectHtml+=showResult?‘</select>秒  =<input type="text"    class="ui-datepicker-close ui-state-default ui-priority-primary ui-datepicker-result"/>秒</div>‘:‘‘;
		 
		return selectHtml;
	};
	
	
	function getTime(mm){
		var str=new Array();
		str[0]=parseInt(mm/(60*60));
		str[1]=parseInt(mm%(60*60)/60);
		str[2]=parseInt(mm%(60*60)%60);
		return str;
	};
	function getSelectedTime(obj,type){
				var time="";
				obj.find(".hhmmssDiv").find("select").find("option:selected").each(function(){
					time+=":"+$(this).text();
				});
				time=time.substring(1, time.length);
				
				if(type==1){
					return time;
				}else{
					var s=time.split(":");
					return parseInt(s[0]*60*60)+parseInt(s[1]*60)+parseInt(s[2]);
				}
	};
	//插件的公共函数
	var methods={
			_TimeDivFields:null,
			ini:function(option){
				_TimeDivFields=TimeDivFields;
				
					return this.each(function () {
				
				        var $this = $(this);
				        jQuery.extend(_TimeDivFields,option);
				        $this.append(getTimeDiv(_TimeDivFields.hour,_TimeDivFields.min,_TimeDivFields.sec,_TimeDivFields.showResult));
				        
				        //下拉框值改变
				        $this.find(".hhmmssDiv").find("select").bind("change",function(){
				        	$this.find(".hhmmssDiv .ui-datepicker-result").val(getSelectedTime($this,0));
				        });
					 //改变文本框
            　　　　　　　　　　　　　　　　　　$this.find(".hhmmssDiv").find("select").change();
						 //文本框值改变
						$this.find(".hhmmssDiv .ui-datepicker-result").bind("blur",function(){
							var sec=$(this).val();
							var time=getTime(sec);
							$this.find(".hhmmssDiv .ui-datepicker-hour").get(0).selectedIndex=time[0];
						
							$this.find(".hhmmssDiv .ui-datepicker-min").get(0).selectedIndex=time[1];
						 
							$this.find(".hhmmssDiv .ui-datepicker-sec").get(0).selectedIndex=time[2];
						 });
				    });
			},
			getTime:function(){
				return getSelectedTime($(this),1);
			},
			getSec:function(){
				return getSelectedTime($(this),0);
			}
	};
	 //定义插件
    $.fn.TimeDiv = function () {
        var method = arguments[0];
        if (methods[method]) {
            method = methods[method];
            arguments = Array.prototype.slice.call(arguments, 1);
        }
        else if (typeof (method) == ‘object‘ || !method) {
            method = methods.ini;
        }
        else {
            $.error(‘Method ‘ + method + ‘ does not exist on jQuery.pluginName‘);
            return this;
        }

        return method.apply(this, arguments);
    };
    $.fn.calSec=function(mm){
    	return getTime(mm);
    }
})(jQuery); 

//$(function () {
//	try{
 //   $("#testPager").TimeDiv({hour:20,min:59});
 //   alert($("#testPager").TimeDiv("getTime"));
  //  alert($().calSec(1000));
  
	//}catch(e){alert(e.message);}
//});
</script>
</html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jquery时间选择器