jq时间五级联动,并且赋值input[格式可以修改]

在开发优议的时候，发现很少有时间五级联动的，后来就自己写了一个联动。希望可以帮到大家

首先把jquery和time.js引用到html中

然后是html

<div class="startTime" id="startTime">
                            <input type="hidden" name="m_startdate" value="" />
                            <span class="sr-only">开始时间</span>
                            <select id="" name="year" class="sel-only">
                            </select>
                            <select id="" name="month" class="sel-only">
                            </select>
                            <select id="" name="day" class="sel-only">
                            </select>
                            <select id="" name="hour" class="sel-only">
                            </select>
                            <select id="" name="minute" class="sel-only" style="margin-right: 70px;">
                            </select>
                        </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();