总结使用layui-laydate日历控件遇到的问题

2023-05-16

一、利用layui-laydate日历控件选择月份

1、问题

选择月份时不能实现鼠标直接点击选择,选择之后需要按“确定”

在这里插入图片描述
原来的代码

html文件:

<div class="layui-inline layui-show-xs-block">
   <span>日期: </span>
   </div>
<div class="layui-inline layui-show-xs-block">
   <input type="text" class="layui-input" id="test10"  autocomplete="off">
</div>

js文件:

laydate.render({
                elem: '#test10'
                ,type: 'month'
            });

2、解决:

修改js文件:

//日期时间范围
laydate.render({
   elem: '#test10'
   ,type: 'month',
   change(value) {
       $('.layui-laydate').on('click','li',function () {
            $('#test10').val(value);
            $('.layui-laydate').remove()
        })
   }
});

二、layui-laydate日历控件总是闪退

1、问题:

点击输入框内时,时间弹框正常弹出,但当鼠标点到输入框的上边框时,时间弹框闪退。

原始代码:

laydate.render({
            elem: '#createtime' //指定元素
            ,type: 'date'
        });

2、原因:

缺少trigger - 自定义弹出控件的事件
类型:String,默认值:focus,如果绑定的元素非输入框,则默认事件为:click

3、解决:

加上 trigger:‘click’ ,//加入click事件

修改后的代码:

laydate.render({
            elem: '#createtime'
            ,type: 'date'
            ,trigger:'click'
        });
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

总结使用layui-laydate日历控件遇到的问题 的相关文章

  • layui的框架导入

    目录 1 导入步骤 2 框架包含的组件 1 导入步骤 1 1 下载框架包 http www layui com 1 2 将layui文件夹拷入项目位置 1 3 页面中导入 layui all js layui css 和 jquery 即可
  • layui使用初步入门

    目录 布局元素 字体图标 按钮 表单 数据表格 弹出层 layui官方地址 layui是模块化框架 这表示你想实现它的某个功能 可以选择不全部引入 只要引入一个一个相关的模块文件即可 引入的方式有两种 一种是将之当成独立组件引入 如 另一种
  • layui表格隐藏列的简单实现方法

    需求 渲染表格的时候 比如id在内的一些列是不需要展示给用户看的 但是在操作表格的时候还需要用得到 这就需要隐藏列 的功能 实现效果 页面上不显示 但是能获取到id的值 实现方法 table render id id 可以在这里设置需要隐藏
  • Layui项目实战

    使用语言 C Js Html 使用框架 MVC Layui 使用插件 JQuery Layui 一 Layui父窗体前端代码 1 Html代码 div class layui col md12 style padding 8px div c
  • layui折叠面板无效 - 已解决

    出现折叠面板无效 可能因为一下两点造成的 原因一 原因二 具体是为什么 我不清楚 正确的方式
  • layui导入文件时,如何动态传递参数

    需求 点击下图中的下拉框 在导入数据时 动态传递select的值 HTML代码如下 div class layui inline div
  • layui 手风琴折叠

    效果图 1 引入文件 注意 文件的位置不一样 引入的路径也不同 2 编写div样式 div style width 100 div class layui collapse div class layui c div div div
  • Layui实现点击文字、缩略图查看图片功能

    刚完成一个客户需求 同一个页面上要有点击缩略图查看大图功能 也有点击图片名称查看原图的功能 点击缩略图查看大图的功能 点击缩略图查看大图的功能实现用的是layui开发文档内的layer photos 相册层 官方开发文档里photos支持传
  • js实现字母序号自动递增

    在实现一个考试管理系统的时候 可能会遇到试题的选项不是固定的情况 需要灵活的增加选项 选项自动递增 A B C D F 通过Unicode编码的方式可以灵活实现 本案例是基于layui表格实现的 如果是其他形式 可以修改部分代码 首先获取到
  • 2021-12-23 工作记录--LayUI-单击行内容展示子表(手风琴效果),堪称yyds

    LayUI 单击行内容展示子表 手风琴效果 百度了好多办法 都不能达到这种效果 所以记录一下 最开始使用layui soul table 但是它不能实现单击行内容展示子表 而是单击行最左列展示子表 所以与项目不符 则放弃了 但是感兴趣的小萝
  • LayUI table 刷新页面不重置页码

    layui table 刷新页面时会自动将页码初始化成1 本章内容介绍怎么让layui table刷新页面后留在当前页 要实现此方法主要使用到cookie存储最后一次翻页的页码 主要修改layui lay modules table js文
  • LayUI系列(一)之layui介绍以及登录功能的实现

    文章目录 一 layui简介 1 1 layui介绍 1 2 主要构成 1 3 迭代历程 1 4 layui easyui和bootstrap对比 1 4 1 layui与bootstrap对比 这两个都属于ui渲染框架 1 4 2 lay
  • layer.msg 的time 时间停留问题

    layer msg 同上 icon 1 time 2000 2秒关闭 如果不配置 默认是3秒 function do something time 属性为弹框停留时间 单位为毫秒 tipsMore 属性为是否同时显示多个弹框 true为显示
  • 解决layui轮播图满屏是高度自适应的问题

    在做官网时 遇到轮播图的问题 本来自己写了个轮播图 怎奈有个问题 当我打开页面后去浏览其他页面 回来首页后会有图片会来回闪动 没有正确轮播 一直没有解决 后来看到了layui插件的轮播图 就拿过来用了 但是图片高度不会自适应 图片变形 如图
  • echarts实现一个页面同时显示多个图表

    前言 因工作需要 老大要求给我一个JSON数据 用echarts 写一个option实现多个图表 折线图 饼图 关系图 展示 也就是说只要一个div dom对象 实现多个不同形状的图表展示 ps 前期没弄清老大意思 写了三个div来显示 尴
  • LayUI中的基本元素之面板

    前言 最近在准备找工作的事项 但是作为一个后台也是需要了解一些前端框架的 就目前的来说有大火的VUE 但是VUE还是存在一定的学习成本 所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手 后面会考虑使用VUE ElementUI
  • js常用正则表达式 匹配多个汉字、数字、英文、所有字符(附带Layui中form的表单验证)

    常用正则表达式 转自 菜鸟工具 https c runoob com front end 854 一 校验数字的表达式 数字 0 9 n位的数字 d n 至少n位的数字 d n m n位的数字 d m n 零和非零开头的数字 0 1 9 0
  • layui php+PHPExcel 拉取excel表格数据一键导入

    需求 大量数据需要导入数据库 直接拉取excel表格进行读取数据并存入数据库 过程中不对文件进行存储 使用上传过程中的缓存文件 前端代码 layui php
  • layui复选框按钮事件(智能去重刷新)

    1 写好复选框 lt input type checkbox value 0 name available title 智能去重 id available lay filter available gt 2 给复选框加事件 form on
  • uview的select组件选择问题

    官方文档羞涩难懂 直接用拖拽工具 对于常用的表单组件 可直接帮你生成相关事件 时间 单列多列等选择器等支持数据回显功能 免开发 在拖拽面板中的 formitem 表单项中 转载 uniapp页面速成提效工具 uniapp uview ui

随机推荐