总结使用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文件上传+ThinkPHP5.1

    引入文件 1 前端html代码
  • 基于LayUI+Servlet的权限管理系统的设计

    权限管理是所有后台系统的都会涉及的一个重要组成部分 主要目的是对不同的人访问资源进行权限的控制 避免因权限控制缺失或操作不当引发的风险问题 如操作错误 隐私数据泄露等问题 本系统基于JSP Servlet JDBC LayUI的技术 在系统
  • layUI基本使用——布局

    layui特点 1 layui属于轻量级框架 简单美化 是用于开发后端模式 它在服务端页面上有非常好的效果 2 layui是提供给后端开发人员的ui框架 基于DOM驱动 layui的使用 引入layui的核心css文件 引入layui的he
  • Layui项目实战

    使用语言 C Js Html 使用框架 MVC Layui 使用插件 JQuery Layui 一 Layui父窗体前端代码 1 Html代码 div class layui col md12 style padding 8px div c
  • java毕业设计,基于layui+SSM实现母婴商场系统

    以下是我今年的论文加作品源码 感谢阅读 如需要源码学习 和本论文进行参考 可私聊我 如遇什么不懂的 我很乐意帮助你 让我们一起成长 目录 摘 要 ABSTRACT 1 绪论 1 1 研究背景 1 2 研究意义 1 3 国内外研究现状 2 开
  • layui日期多选

    先引入layui的css和js html部分 div class layui inline div
  • xShell操作Linux的常用命令

    我们需要在本地连接Linux服务器 可以用winscp来进行连接 优点是图形化界面 文件的层级关系类似于Windows 更容易操作 也可以使用xShell来进行连接 查看和操作文件就需要使用Linux命令 文件的层级关系没有前者直观 但作为
  • layui显示表格数据的id的两种形式

    1 获取数据库表字段id field id title 用户ID width 100 fixed left align center templet function d return d id 2 templet属性获得id为 title
  • OA会议管理系统之我的会议(会议排座&可拖拽座位&附源码)

    目录 一 前言 1 导读 二 我的会议功能实现 1 功能介绍 2 功能分析 3 功能实现 3 1 前期准备 3 2 dao层编写 3 3 jsp页面搭建 3 4 Web层编写 4 案例展示 一 前言 1 导读 OA会议管理系统之会议发布 内
  • springboot实战---记账本项目

    项目放在了服务器上 点我访问项目 root权限账号密码 root root 普通用户账号密码 user 123456 登陆界面预览 主页面预览 只做了一个页面的增删改查 使用springboot mybatis shiro layui 我使
  • layui添加菜单和动态操作tab

    layui添加菜单和动态操作tab 代码一 使用模板引擎渲染菜单 代码二修改版 代码一 使用模板引擎渲染菜单
  • ThinkPHP6.0 多应用模式 部署 Layuiadmin 单页版

    QQ 23426945 PHP技术群 159789818 个人技术博客 https www itqaq com TP6 0中的路由省略应用名只能用入口文件绑定应用 和 域名绑定应用 经过测试 最后得出域名绑定应用是最合适的部署方式 如果有更
  • 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
  • 解决width: 100%;再设置margin问题

    最近在做前端 遇到了这么个小问题 就是当我们把一个 div 的 width 设置为 100 之后 再设置 margin 的时候 这个div 莫名其妙的超出了屏幕 情景如下图 这就很难受了啊 不过办法总比困难多 下面 我将讲两种解决方法 方法
  • layui 数据表格 sort排序,filter过滤——soulTable

    1 效果图 2 页面代码 div class fp table style margin left 0 5 width 86 table style margin bottom 0px table div 3 js代码 引入扩展组件 lay
  • 会议OA项目----我的审批

    前言 上一篇博客我将我的会议的送审和会议排座这两个功能完成 送审之后就到了审批阶段 那么这次做的就是 我的审批 一 实现思路 根据产品原型图 见产品原型图 我的审批界面与我的会议界面大同小异 那么我们可以调用之前的写好的SQL语句 只不过将
  • ruoyi框架时间范围range增加今日,近7日,近30日时间选择

    原先layui时间控件是不支持今日 近7日 近30日选择的 网上的解决方法是直接在引用的js中修改代码 这是一种方法 但是对于不能修改源代码的童鞋来说是不行的 所以一下解决方法诞生了 直接添加这三个按钮并和时间控件 laydate 有友好的
  • LayUI中的基本元素之面板

    前言 最近在准备找工作的事项 但是作为一个后台也是需要了解一些前端框架的 就目前的来说有大火的VUE 但是VUE还是存在一定的学习成本 所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手 后面会考虑使用VUE ElementUI
  • layui php+PHPExcel 拉取excel表格数据一键导入

    需求 大量数据需要导入数据库 直接拉取excel表格进行读取数据并存入数据库 过程中不对文件进行存储 使用上传过程中的缓存文件 前端代码 layui php
  • 企业电子招标采购系统源码Spring Cloud + Spring Boot + MybatisPlus + Redis + Layui + 前后端分离 + 二次开发

    项目说明 随着公司的快速发展 企业人员和经营规模不断壮大 公司对内部招采管理的提升提出了更高的要求 在企业里建立一个公平 公开 公正的采购环境 最大限度控制采购成本至关重要 符合国家电子招投标法律法规及相关规范 以及审计监督要求 通过电子化

随机推荐