首页 > 代码库 > jquery时间选择器
jquery时间选择器
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><link rel="stylesheet" href="http://www.mamicode.com/resources/css/reset.css" type="text/css" media="screen" /><link rel="stylesheet" href="http://www.mamicode.com/resources/css/style.css" type="text/css" media="screen" /><link rel="stylesheet" href="http://www.mamicode.com/resources/css/invalid.css" type="text/css" media="screen" /><link rel="stylesheet" href="http://www.mamicode.com/resources/css/south-street/jquery-ui-1.9.2.custom.css" type="text/css" /><!-- Javascripts --><script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.8.3.js"></script><script type="text/javascript" src="http://www.mamicode.com/js/jquery-ui-1.9.2.custom.js"></script><!-- date --><script type="text/javascript" src="http://www.mamicode.com/js/jquery.ui.datepicker-zh-CN.min.js"></script><script type="text/javascript" src="http://www.mamicode.com/js/util/datetwo.js"></script><!-- datatables --><script type="text/javascript" src="http://www.mamicode.com/js/datatables/jquery.dataTables.js"></script><link rel="stylesheet" href="http://www.mamicode.com/resources/css/dataTables.jqueryui.css" type="text/css" /><script type="text/javascript" src="http://www.mamicode.com/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时间选择器
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。