【layui】laydate年份选择，关闭底框，点击指定年份就选择然后关闭控件，翻页不选择也不关闭控件

如下图，翻页不选择也不关闭。点击指定年份时再选择和关闭控件

 

1、代码如下

// 默认没有选择，把判断赋值当前时间
var iYearCode = parseInt(new Date().getFullYear().toString());
// 如果上一次选择了，但手动删除或修改了，再把判断赋值当前时间
$("#yearCode").bind("input propertychange",function(event){
    var yearCode = $("#yearCode").val();
    if(undefined == yearCode || null == yearCode || yearCode.length < 4) {
        iYearCode = parseInt(new Date().getFullYear().toString());
    } else {
        iYearCode = parseInt(yearCode);
    }
});
layui.laydate.render({
    elem: '#yearCode' 
    ,type:'year'
    ,showBottom: false
    ,change: function(value, date, endDate){
        // 获取翻页或点击选择年份数据
        var iValue = parseInt(value);
        // 获取一页年份列表个数，翻页的话，两个年份肯定等于列表年份个数长度
        var year_list = $(".laydate-year-list")[0].getElementsByTagName("li").length;
        
        // 如果上一次选择和这次选择之间不超过年份列表个数，那么就是点击选择指定年份
        if(Math.abs(iYearCode - iValue) < year_list) {
            $('#yearCode').val(value);
            $('.layui-laydate').remove();
        }
        // 赋值给判断
        iYearCode = iValue;
    }
});

 

2.1、或者：

laydate.render({
    elem: '#archiveYear',
    max: new Date().getFullYear().toString(),
    type: 'year',
    value: new Date().getFullYear().toString(),
    isInitValue: true,
    trigger: 'click',
    showBottom: false,
    position: 'fixed',
    change: function (value, date, endDate) {
        if (this.min.year <= date.year && date.year <= this.max.year) {
            $(this.elem).val(value);
        } else if (date.year < this.min.year) {
            $(this.elem).val(this.min.year);
        } else if (date.year > this.max.year) {
            $(this.elem).val(this.max.year);
        }
        if (undefined == this.myYear) {
            this.myYearListLength = $(".laydate-year-list")[0].getElementsByTagName("li").length;
            if (this.value) {
                this.myYear = (parseInt(this.value) - (this.myYearListLength - 1)/2) + "年 - " + (parseInt(this.value) + (this.myYearListLength - 1)/2) + "年";
            } else {
                this.myYear = (new Date().getFullYear() - (this.myYearListLength - 1)/2) + "年 - " + (new Date().getFullYear() + (this.myYearListLength - 1)/2) + "年";
            }
            if ($('.laydate-set-ym').find('span[lay-type="year"]').html() == this.myYear) {
                $("#layui-laydate" + $(this.elem).attr('lay-key')).remove();
            } else {
                this.myYear = $('.laydate-set-ym').find('span[lay-type="year"]').html();
            }
        } else {
            if ($('.laydate-set-ym').find('span[lay-type="year"]').html() == this.myYear) {
                $("#layui-laydate" + $(this.elem).attr('lay-key')).remove();
            } else {
                this.myYear = $('.laydate-set-ym').find('span[lay-type="year"]').html();
            }
        }
    }
});

 

2.2、方法抽取：

laydate.render({
    elem: '#archiveYear',
    max: new Date().getFullYear().toString(),
    type: 'year',
    value: new Date().getFullYear().toString(),
    isInitValue: true,
    trigger: 'click',
    showBottom: false,
    position: 'fixed',
    change: function (value, date, endDate) {
        laydateYearSetValue(this, value, date);
    }
});


/**
 * laydate的year类型设值，在change方法调用
 * 
 * @param thiz change里面的this
 * @param value change的参数value
 * @param date change的参数date
 */
function laydateYearSetValue(thiz, value, date) {
    if (thiz.min.year <= date.year && date.year <= thiz.max.year) {
        $(thiz.elem).val(value);
    } else if (date.year < thiz.min.year) {
        $(thiz.elem).val(thiz.min.year);
    } else if (date.year > thiz.max.year) {
        $(thiz.elem).val(thiz.max.year);
    }
    if (undefined == thiz.myYear) {
        thiz.myYearListLength = $(".laydate-year-list")[0].getElementsByTagName("li").length;
        if (thiz.value) {
            thiz.myYear = (parseInt(thiz.value) - (thiz.myYearListLength - 1)/2) + "年 - " + (parseInt(thiz.value) + (thiz.myYearListLength - 1)/2) + "年";
        } else {
            thiz.myYear = (new Date().getFullYear() - (thiz.myYearListLength - 1)/2) + "年 - " + (new Date().getFullYear() + (thiz.myYearListLength - 1)/2) + "年";
        }
        if ($('.laydate-set-ym').find('span[lay-type="year"]').html() == thiz.myYear) {
            $("#layui-laydate" + $(thiz.elem).attr('lay-key')).remove();
        } else {
            thiz.myYear = $('.laydate-set-ym').find('span[lay-type="year"]').html();
        }
    } else {
        if ($('.laydate-set-ym').find('span[lay-type="year"]').html() == thiz.myYear) {
            $("#layui-laydate" + $(thiz.elem).attr('lay-key')).remove();
        } else {
            thiz.myYear = $('.laydate-set-ym').find('span[lay-type="year"]').html();
        }
    }
}