layui 学习

遥远sunshine

已于 2022-10-10 16:36:19 修改

阅读量264

点赞数

分类专栏： js 文章标签： layui 学习前端

于 2022-10-10 14:35:30 首次发布

本文链接：https://blog.csdn.net/xiangnianziyou/article/details/127244132

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1. 文档地址

2. 插件

（1）xml-select layui的一个多选解决方案

3. 遇到的问题

（1）时间控件只显示时分

layui.use(['laydate','form','layer'], function(){
  var laydate = layui.laydate,form=layui.form,layer = layui.layer;
  //执行一个laydate实例
  laydate.render({
    elem: '#test', //指定元素
    type: 'datetime',
    format: 'yyyy-MM-dd HH:mm',
    trigger: 'click',
    ready: formatminutes
  });

});

function formatminutes(date){
	    var aa = $(".laydate-time-list li ol")[1];
	    var showtime = $($(".laydate-time-list li ol")[1]).find("li");
	    for (var i = 0; i < showtime.length; i++) {
	      var t00 = showtime[i].innerText;
	      if (t00 != "00" && t00 != "10" && t00 != "20" && t00 != "30" && t00 != "40" && t00 != "50") {
	         showtime[i].hidden = true;
	      }

        }  
} 
$($(".laydate-time-list li ol")[2]).find("li").remove(); //清空秒

css

.laydate-time-list {
    padding-bottom: 0;
    overflow: hidden
}
.laydate-time-list > li {
    width: 50% !important;
}
.laydate-time-list > li:last-child {
    display: none;
}

(2) input 框可输入可选择点击下载

1. 引入 `dist/select-input.js`
2. 写一个`<div id="demo"></div>`
3. 渲染
	let ins = selectInput.render({
		elem: '#demo', 
		data: [
			{name: '小米', value: 1},
			{name: '苹果', value: 2},
			{name: '华为', value: 3},
			{name: 'vivo', value: 4}
		]
   })