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

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();
}
}
}

laydate年份选择,关闭底框,点击指定年份就选择然后关闭控件,翻页不选择也不关闭控件的更多相关文章

  1. gridView AspNetPager 翻页时 弹出窗体关闭报错

    gridView AspNetPager 翻页后,你右击刷新或F5会发现弹出一个刷新页面. 这是因为默认翻页都是用dopostback方式回发的.因为这时的页面已经不是原来的页面.所以会弹出提示. 这 ...

  2. (java)selenium webdriver学习,选择模块,点击下一页,获取当前url

    selenium webdriver学习,选择模块,点击下一页,获取当前url 查找下一页有多种方法,这里列举两种: isSelected()函数用于判断是否点击选中,返回Boolean类型 impo ...

  3. 原创:用VBA实现将鼠标选择的单元格按照指定格式合并并复制到剪切板

    原创:用VBA实现将鼠标选择的单元格按照指定格式合并并复制到剪切板 一.主要实现以下功能:1.用鼠标选择单元格(可谓连续单元格,也可为不连续的)后,按照要求格式“证件号码:+选定内容+“,”+”选定内 ...

  4. [Selenium]点击下拉框之后,从下拉列表选择元素进行点击很容易失败

    点击下拉框之后,下拉列表会显示出来,但是有时候下拉列表会很快就消失掉,导致后面选择元素的时候会失败. 像这种情况,需要将鼠标移动到下拉列表上,使下拉列表维持显示,然后才选择元素进行点击. 将鼠标移动到 ...

  5. 如果没有指定Cookie的时效,那么默认的时效是。(选择1项)

    如果没有指定Cookie的时效,那么默认的时效是.(选择1项) A.一天 B. 永不过期 C.会话级别 D.一分钟 解答:C 这是API的原文:By default, -1 indicating th ...

  6. 简易数据分析 08 | Web Scraper 翻页——点击「更多按钮」翻页

    这是简易数据分析系列的第 8 篇文章. 我们在Web Scraper 翻页--控制链接批量抓取数据一文中,介绍了控制网页链接批量抓取数据的办法. 但是你在预览一些网站时,会发现随着网页的下拉,你需要点 ...

  7. easyUI datagrid中checkbox选中事件以及行点击事件,翻页之后还可以选中

    DataGrid其中与选择,勾选相关 DataGrid属性:singleSelect boolean 如果为true,则只允许选择一行. false ctrlSelect boolean 在启用多行选 ...

  8. 在页面中添加两个 <select> 标签,用来显示年份和月份;同时添加两个 <ul> 标签,一个用来显示星期,另一个用来显示日期 在 JavaScript 脚本中动态添加年份和月份,获取当前日期的年份

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 Date 对象,在页面上显示一个万年历.选择不同的年份和月份,在页面中显示当前月的日历 实现思路: 在页面中添加两个 <s ...

  9. Atitit.ui控件---下拉菜单选择控件的实现select html

    Atitit.ui控件---下拉菜单选择控件的实现select   html 1. 调用& model的实现 1 2. -----select.jsp------ 1 1. 调用& m ...

随机推荐

  1. Linux 硬件软件时间同步

    同步BIOS时钟,强制把系统时间写入CMOS clock --show   查看硬件时间clock -w       强制把系统时间写入CMOSclock --show   查看硬件时间reboot ...

  2. 剖析生产系统的I/O模式

    剖析生产系统的I/O模式 2019/02/13 vmunix 了解I/O的特点对于优化系统性能非常重要,I/O是顺序的还是随机的,是读操作还是写操作,读写的比例是多少,I/O数据块的大小,这些都是影响 ...

  3. 永远不会被卡的Dinic

    78,79行是精髓 61,148,149行是当前弧优化 #include <cstring> #include <cstdio> #include <queue> ...

  4. yii中异步验证和自定义方法验证

    一.异步验证,一般使用ajax验证唯一性较多 1.model开启验证[['mobile_id','ip'], 'unique','message'=>Yii::t('app','E10010') ...

  5. Cubic-bezier 曲线

    cubic-bezier又称三次贝塞尔,主要是为animation生成速度曲线函数. cubic-bezier(x1,y1,x2,y2) 此图中: P0:(0,0) P1:(x1,y1) P2:(x2 ...

  6. ubuntu dnsmasq

    /var/run/NetworkManager/resolv.conf 而你真实的dns服务器地址,是被这个服务管理维护着的/ local process -> local dnsmasq -& ...

  7. SSM整合小结

    基本环境搭建 pom依赖 <dependencies> <!--Junit--> <dependency> <groupId>junit</gro ...

  8. linux下安装pm2,pm2: command not found

    1:安装pm2 操作描述: 你要在linux上安装pm2有很多方法,但我是用node的工具npm来完成安装的,所以在安装pm2之前需要先安装node.这里如果不会,就百度一个安装node,这个小事我就 ...

  9. Tosca 注意事项(持续更新)

    #浏览器不能同时打开两个,不然不知道选哪个 #浏览器必须是100% 不能zoom in zoom out #浏览器 internet options 必须要配置,不然跑的很慢 照着这个配  https ...

  10. 【分类算法】决策树(Decision Tree)

    (注:本篇博文是对<统计学习方法>中决策树一章的归纳总结,下列的一些文字和图例均引自此书~) 决策树(decision tree)属于分类/回归方法.其具有可读性.可解释性.分类速度快等优 ...