laydate日期时间插件年选择器和年月选择器实现不用点击确定

最新推荐文章于 2024-07-29 14:48:30 发布

花乐晴

最新推荐文章于 2024-07-29 14:48:30 发布

阅读量1.3k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_44195615/article/details/113707333

版权

前端专栏收录该内容

39 篇文章 1 订阅

订阅专栏

本文介绍了如何在不修改laydate日期时间插件源代码的情况下，使得年选择器和年月选择器在选择后无需点击确定即可关闭。通过监听`ready`和`change`事件，当选择的年份或年月满足特定条件时，自动关闭日期选择框并设置输入框的值。这种优化提高了用户的使用体验。

摘要由CSDN通过智能技术生成

laydate日期时间插件只有是日期的时候才不用点确定，年选择器和年月选择器的时候必须点确定才能选中。用起来很不方便，这里在不改变源代码的情况实现不用点击确定。

1.年选择器实现

<input type="text" name="year" id="year" placeholder="yyyy-MM" class="layui-input"  >

js代码

layui.use('laydate', function(){
	var laydate = layui.laydate;
	var initYear;
	laydate.render({
		elem: '#year',
		type: 'year',
		/* ready和change函数是为了实现选择年份时不用点确定直接关闭  */
		ready: function(date){ // 控件在打开时触发，回调返回一个参数：初始的日期时间对象
			initYear = date.year;
		},
		change: function(value, date, endDate){ // 年月日时间被切换时都会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
			var selectYear = date.year;
			var differ = selectYear-initYear;
			if (differ != 15 && differ != -15) {
				if($(".layui-laydate").length){
					$("#year").val(value);
					$(".layui-laydate").remove();
				}
			}
			initYear = selectYear;
		}
	});
});

2.年月选择器实现

<input type="text" name="yearMonth" id="yearMonth" placeholder="yyyy-MM" class="layui-input"  >

js代码

layui.use('laydate', function(){
	var laydate = layui.laydate;
	var initYear;
	laydate.render({
		elem: '#yearMonth',
		type: 'month',
		/* ready和change函数是为了实现选择年月时不用点确定直接关闭  */
		ready: function(date){ // 控件在打开时触发，回调返回一个参数：初始的日期时间对象
			initYear = date.year;
		},
		change: function(value, date, endDate){ // 年月日时间被切换时都会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
			var selectYear = date.year;
			var differ = selectYear-initYear;
			if (differ == 0) {
				if($(".layui-laydate").length){
					$("#yearMonth").val(value);
					$(".layui-laydate").remove();
				}
			}
			initYear = selectYear;
		}
	});
});