layui想要只能点击日期控件选中对应的日期，不能手动输入

最新推荐文章于 2023-03-15 12:06:25 发布
最新推荐文章于 2023-03-15 12:06:25 发布
阅读量1k 收藏
点赞数 2
文章标签： layui javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ashley_lidan/article/details/125994814
版权

只能点击日期控件选中对应的日期，不能手动输入，layui日期控件使用type类型用date,行内属性加上"readonly",另外在laydate.render({})里面加上trigger属性为"click",这两个条件同时要有才不能手动输入。

Ashley_lidan
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
layui日期控件不能手动输入，只能通过点击日期控件中的日期选择对应的日期
微风徐徐的博客
03-14 3488
最近我也在使用layui日期控件，想要只能点击日期控件选中对应的日期，不能手动输入，找了好几篇教程也没解决问题，最后，我把所有的只读属性都添加上试了试，才完成的，layui日期控件使用type类型用date,行内属性加上"readonly",另外在laydate.render({})里面加上trigger属性为"click",这两个条件同时要有才不能手动输入。 <input type="da...
LayUI中的时间日期控件，设置时间范围，过去的时间不能选择，只能选择未来的时间
热门推荐
huangbaokang的博客
06-07 2万+
默认Layui中的时间控件显示如下： 我当时系统时间是2018-06-07，大家可以看到，过去的时间还是能选择的。 考虑到项目需求，很大可能选择日期只能是未来的时间。如：还款日期，发布日期，项目上线时间等。 默认显示一个时间框的代码如下： &lt;input type="text" name="publish_date" id="date" lay-verify="date" pl...
layui 设置日期控件不能手动输入，必须选择时间
这么多柠檬c
01-27 2539
layui 设置日期控件不能手动输入，必须选择时间
layui日期控件，多选，禁选，自定义设置
Jack方
05-23 1万+
实现layui日历控件多选、禁选
Layui的laydate日期组件限制只能选择工作日
QINGZHID的博客
03-15 1295
至此laydate日期组件限制选择工作日就已经完成了，美中不足的是如果没用去除“现在”按钮，点击“现在”按钮还是可以选择被禁用的元素，这应该算是个bug了，建议去除掉这个按钮或者尝试重写下选择的方法，判断一下元素是否被禁用。在laydate日期组件，进行翻页等切换操作的时候，要重新执行格式化操作，把非工作日禁用掉。如题，在使用Layui的laydate日期组件时，layui只给我们提供了日期组件的。//遍历td，index===0表示周日，index===6表示周六。//执行一个laydate实例。
layer过去的时间不能选择，只能选择未来的时间 LayUI中的时间日期控件，设置时间范围，...
08-09 1825
默认Layui中的时间控件显示如下： 我当时系统时间是2018-06-07， 我需要做的是2018-06-07之后过去的时间不能选择 <p><span>时间范围：</span><input type="text" id="test16" name="t_data" value="" placeholder="开始 到 结束">...
layui日历控件设置选择日期不能超过当前日期
weixin_39482360的博客
02-22 6880
layui.use('laydate', function() { var laydate = layui.laydate; laydate.render({ elem : '#begin', max : getNowFormatDate() }); laydate.render({ elem : '#end', max : getNowFo...
layui table 表格上添加日期控件的两种方法
10-16
今天小编就为大家分享一篇layui table 表格上添加日期控件的两种方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui前段框架日期控件使用方法详解
08-30
layui前端框架日期控件是一种基于layui框架的日期选择控件，提供了多种日期选择方式，包括单个日期选择、日期范围选择等，以下将详细介绍layui前端框架日期控件的使用方法。 一、日期控件的基本使用 layui日期控件...
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
10-16
在本文中，我们将深入探讨如何使用layui框架中的日期控件laydate实现开始和结束时间的联动控制。这种功能常见于需要用户输入一个时间段的场景，例如预约、计划设定等，确保用户选择的结束时间在开始时间之后。 首先...
使用laydate日期输入弹框
01-17
使用laydate日期输入弹框，内含代码实例，可直接使用。
详解Vue.js和layui日期控件冲突问题解决办法
10-16
例如，当用户在日期控件选择日期后，在后续输入框中输入内容，Vue.js的model绑定会清除先前选中的日期，因为Vue.js认为用户没有进行任何操作。 为了解决这个问题，我们可以采取以下步骤： 1. **移除v-model绑定**...
layui 日期输入框 禁止输入字符
简析的博客
06-23 3593
layui 的日期输入框，输入其他字符时报错。 首先想到加限制，比如 给输入框加 lay-verify="date" ，但是加了layui 中这个限制，就成了必填，空值不行，本来想改一下form.js 中对date的正则，觉得欠妥。 后来的解决办法是，让日期输入框只能选择，不可填写。加readonly <input type="text" class="layui-input" name="startDate" id="date1" placeholder="开始日期" readonly&
总结使用layui-laydate日历控件遇到的问题
weixin_44764814的博客
04-06 4003
一、利用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"
layui.laydate 点击日期后，如何不用点击确定 就关闭控件
weixin_42228937的博客
07-09 3421
layui.laydate 点击日期后，如何不用点击确定 就关闭控件 laydate.render({ elem: '#endDate', type: 'year', btns: ['now', 'confirm'], ready: function (date) { $(".layui-laydate").on('click', 'ul li', function () {
Layui时间范围选择器，自动填充结束时间
技术分享博客
09-14 1201
Layui时间范围选择，自动填充结束时间 效果展示： 第一步： 第二步： 第三步： 效果描述：当开始时间选择完成点击确定后自动再开始时间添加三十天，并将其填充到结束时间的文本框内
layui 中日期&时间选择:自定义时间段/日期周六日不可选/未来日期的时间均可选/当天时间超过的不可选(日期时间联动出现)
COCOLI_BK的博客
05-16 4862
时间自定义:特定时间段设置 图片 主题代码:只需要引入layui.css和layui.js即可看到效果 注意一点,两个laydate中的format属性里的格式写法,必须不能出现重名的,否则会前者的值会覆盖后者,比如:type为date:yyyy-mm-dd和type为time:HH:mm,就会出现后者选时间分钟时一直为前者的月份,这是一个注意事件:正确写法代码中写的即...
实现input date标签只能点击选择输入日期，不能手动输入日期的方法
qq_44904916的博客
10-23 3594
laydate 实现动态修改type和format
qq_42622763的博客
08-05 2623
今天做一个数据统计，想实现通过不同的时间纬度来控制统计范围，大概效果图如下： 日日期选择面板 月日期选择面板 html 代码 部分 <div class="layui-form-item"> <label class="layui-form-label" style="width:120px">统计纬度</label> <div class="layui-input-inline"> <input ...
layui 表单回显 点击页面 日期控件值变成当前时间
最新发布
06-06
在 layui 中，可以使用 form.val() 方法来实现表单数据的回显。而要实现点击页面后，日期控件的值变为当前时间，可以通过 JS 获取当前时间并将其赋值给日期控件。 以下是一个示例代码： HTML 代码： ```html <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">日期</label> <div class="layui-input-block"> <input type="text" class="layui-input" id="date" name="date"> </div> </div> </form> ``` JavaScript 代码： ```javascript layui.use(['form', 'laydate'], function(){ var form = layui.form; var laydate = layui.laydate; // 渲染日期选择器 laydate.render({ elem: '#date', format: 'yyyy-MM-dd', value: new Date() }); // 模拟表单数据 var data = { date: '2021-01-01' }; // 表单数据回显 form.val('example', data); // 点击页面，日期控件的值变为当前时间 $(document).on('click', function(){ var now = new Date(); laydate.render({ elem: '#date', format: 'yyyy-MM-dd', value: now }); }); }); ``` 在上面的示例代码中，我们首先渲染了一个日期选择器，并将其默认值设置为当前时间。然后模拟了一组表单数据，并使用 form.val() 方法将其回显到表单中。 最后，我们使用 jQuery 的 .on() 方法监听页面的点击事件。当页面被点击时，我们获取当前时间并将其赋值给日期控件，从而实现了点击页面后，日期控件的值变为当前时间的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值