layui年月选择器实现点击选择并关闭弹窗

保持上进心

于 2021-07-05 16:01:01 发布

阅读量826

点赞数

分类专栏：前端文章标签： javascript layui

本文链接：https://blog.csdn.net/qq_41541368/article/details/118492058

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

博客内容介绍了如何使用layui库来渲染一个只显示月份的时间选择控件。通过添加'monthRender'类到DOM元素，然后调用JavaScript函数`timeRenderMonth`进行渲染。在改变选择的月份时，如果选中的是当前项，则会更新输入框的值并移除lay-key属性。

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

html代码

// 需要绑定的dom元素加上monthRender样式
<input type="text" class="layui-input monthRender"/>

js代码

//渲染layui时间控件(年月)
function timeRenderMonth(){
	lay('.monthRender').each(function() {
		laydate.render({
			elem: this,
			type: 'month',
			change: function(value, date, endDate){
				if ($(event.target).hasClass("layui-this")) {
					$(this.elem).val(value);
					$(".layui-laydate").remove();
				}
			}
		});
	});
	$(".monthRender").removeAttr("lay-key");
}
// 加载时间控件渲染方法
timeRenderMonth();