欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 科技 > 能源 > 【layUI】只能选某个特定区间的日历

【layUI】只能选某个特定区间的日历

2024/10/24 21:24:15 来源:https://blog.csdn.net/qsbbl/article/details/141327502  浏览:    关键词:【layUI】只能选某个特定区间的日历

要实现的功能如下:业务要求让日历只有近3天可选,其它部分变灰且不可选。

代码实现

在html中加入如下代码:

<label class="layui-form-label" style="">日期:
</label>
<div class="layui-input-block"><input type="text" name="startTime" id="startTime" lay-verify="required"lay-verType="tips" placeholder="请选择日期" value="${((job.startTime)?string('yyyy-MM-dd HH:mm:ss'))!''}"autocomplete="off" class="layui-input" readonly="readonly">
</div>
<script>$(function() {let laydate = layui.laydate;//日期时间选择器laydate.render({elem: '#startTime',type: "datetime",min: 0,max: 3});});
</script>

代码块解读:
1、type可选的类型有:
year:年
month:年月
date:年月日,默认是这个
time:时分秒
datetime:年月日时分秒

2、min、max是实现功能的关键。
比如要实现只能选前2天后3天,则min=-2,max=3。
又比如只能选xxx月xxx日~xxx月xxx日的日子,直接填充日期即可。

小结

1、layUI是一个前端框架,同级别的有Vue、Angular、React等。
2、开发中可参考的文档如下,常用的样式怎么写,里面都写的明明白白儿的了。
https://lln.kim/layui/doc/modules/code.html
http://poweredbywww.ourphp.net/layui_doc/demo/tree.html

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com