jq时间五级联动,并且赋值input[格式可以修改]
在开发优议的时候，发现很少有时间五级联动的，后来就自己写了一个联动。希望可以帮到大家
首先把jquery和time.js引用到html中
然后是html
1 <div class="startTime" id="startTime"> 2 <input type="hidden" name="m_startdate" value="" /> 3 <span class="sr-only">开始时间</span> 4 <select id="" name="year" class="sel-only"> 5 </select> 6 <select id="" name="month" class="sel-only"> 7 </select> 8 <select id="" name="day" class="sel-only"> 9 </select> 10 <select id="" name="hour" class="sel-only"> 11 </select> 12 <select id="" name="minute" class="sel-only" style="margin-right: 70px;"> 13 </select> 14 </div>
然后是time.js
//input赋值 ;(function($){ $.fn.setTimes = function(options){ var opts = $.extend({}, $.fn.setTimes.defaults, options); //设置元素 var $year, $month, $day, $hour, $minute; //元素赋值 $year = $(this).children("select[name="+ opts.year +"]").val(); $month = $(this).children("select[name="+ opts.month +"]").val(); $day = $(this).children("select[name="+ opts.day +"]").val(); $hour = $(this).children("select[name="+ opts.hour +"]").val(); $minute = $(this).children("select[name="+ opts.minute +"]").val(); //获取input var inputs = $(this).children("input"); // inputs.val($year+"-"+$month+"-"+$day+"-"+$hour+"-"+$minute); $(this).children("select[name="+ opts.year +"]").change(function (){ $year = $(this).children("select[name="+ opts.year +"] option:selected").val(); inputs.val($year+"-"+$month+"-"+$day+"-"+$hour+"-"+$minute); }); $(this).children("select[name="+ opts.month +"]").change(function (){ $month = $(this).children("select[name="+ opts.month +"] option:selected").val(); inputs.val($year+"-"+$month+"-"+$day+"-"+$hour+"-"+$minute); }); $(this).children("select[name="+ opts.day +"]").change(function (){ $day = $(this).children("select[name="+ opts.day +"] option:selected").val(); inputs.val($year+"-"+$month+"-"+$day+"-"+$hour+"-"+$minute); }); $(this).children("select[name="+ opts.hour +"]").change(function (){ $hour = $(this).children("select[name="+ opts.hour +"] option:selected").val(); inputs.val($year+"-"+$month+"-"+$day+"-"+$hour+"-"+$minute); }); $(this).children("select[name="+ opts.minute +"]").change(function (){ $minute = $(this).children("select[name="+ opts.minute +"] option:selected").val(); inputs.val($year+"-"+$month+"-"+$day+"-"+$hour+"-"+$minute); }); } $.fn.setTimes.defaults = { year:"year", month:"month", day:"day", hour:"hour", minute:"minute" }; })(jQuery); //时间设置 ;(function($){ $.fn.hours = function(options){ var opts = $.extend({}, $.fn.hours.defaults, options); var $hour = $(this).children("select[name="+ opts.hour +"]"); var $minute = $(this).children("select[name="+ opts.minute +"]"); var hourArr = ["01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24"];//时 var minuteArr = ["00","15","30","45"]; return this.each(function(){ con = ""; var h = hourArr[0];//默认显示时 console.log() for(i = 0; i < hourArr.length; i++){ con += "<option value='"+hourArr[i]+"'>"+hourArr[i]+"时"+"</option>"; } $hour.append(con); con = ""; var m = minuteArr[0]; for(i = 0; i < minuteArr.length; i++){ con += "<option value='"+minuteArr[i]+"'>"+minuteArr[i]+"分"+"</option>"; } $minute.append(con); }); } $.fn.hours.defaults = { hour:"hour", minute:"minute" }; })(jQuery); //日期设置 ;(function($){ $.fn.time = function(options){ var opts = $.extend({}, $.fn.time.defaults, options);//整合参数 var $year = $(this).children("select[name="+ opts.year +"]"); var $month = $(this).children("select[name="+ opts.month +"]"); var $day = $(this).children("select[name="+ opts.day +"]"); MonHead = [31,28,31,30,31,30,31,31,30,31,30,31]; return this.each(function(){ var y = new Date().getFullYear()+1; var con = ""; //添加年份 for(i = y; i >= (y-3); i--){ con += "<option value='"+i+"'>"+i+"年"+"</option>"; } $year.append(con); con = ""; //添加月份 for(i = 1;i <= 12; i++){ if(i<10){ i ="0" + i; }else { i=i; } con += "<option value='"+i+"'>"+i+"月"+"</option>"; } $month.append(con); con = ""; //添加日期 var n = MonHead[0];//默认显示第一月 for(i = 1; i <= n; i++){ if(i<10){ i ="0" + i; }else { i=i; } con += "<option value='"+i+"'>"+i+"日"+"</option>"; } $day.append(con); $.fn.time.change($(this)); }); }; $.fn.time.change = function(obj){ obj.children("select[name="+ $.fn.time.defaults.year +"],select[name="+ $.fn.time.defaults.month +"]").change(function(){ var $year = obj.children("select[name="+ $.fn.time.defaults.year +"]"); var $month = obj.children("select[name="+ $.fn.time.defaults.month +"]"); var $day = obj.children("select[name="+ $.fn.time.defaults.day +"]"); $day.empty(); var selectedYear = $year.find("option:selected").val(); var selectedMonth = $month.find("option:selected").val(); if(selectedMonth == 2 && $.fn.time.IsRunYear(selectedYear)){//如果是闰年 var c =""; for(var i = 1; i <= 29; i++){ if(i<10){ i ="0" + i; }else { i=i; } c += "<option value='"+i+"'>"+i+"日"+"</option>"; } $day.append(c); }else {//如果不是闰年也没选2月份 var c = ""; for(var i = 1; i <= MonHead[selectedMonth-1]; i++){ if(i<10){ i ="0" + i; }else { i=i; } c += "<option value='"+i+"'>"+i+"日"+"</option>"; } $day.append(c); } }); }; $.fn.time.IsRunYear = function(selectedYear){ return(0 == selectedYear % 4 && (selectedYear%100 != 0 || selectedYear % 400 == 0)); }; $.fn.time.defaults = { year:"year", month:"month", day:"day" }; })(jQuery);
用法
$("#startTime").time();
$("#endTime").time();
$("#startTime").hours();
$("#endTime").hours();
$("#startTime").setTimes();
$("#endTime").setTimes();
