当前位置: 首页 > news >正文

【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

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 24/8/18算法笔记 目标导向强化学习
  • 【C++】C++11新增特性
  • Fabric:关于链码的编写及部署的问题记录
  • 在CodeBlocks搭建SDL2工程OLED液晶模拟器虚拟OLED单色液晶(128x64)
  • 使用MongoDB构建AI:Story Tools Studio将生成式AI引入Myth Maker AI游戏
  • vue中点击导航栏,动态改变样式,经典写法
  • Linux网络:基于OS的网络架构
  • 【Kubernetes】k8s集群图形化管理工具之rancher
  • SourceTree远端!无法获取代码
  • 6. 数据结构—串的匹配算法
  • SpringBoot教程(二十二) | SpringBoot实现分布式定时任务之elastic-job
  • PMP到底有什么用?
  • C++的模板简介
  • JVM 类加载机制
  • Git的使用-初级
  • 【MySQL经典案例分析】 Waiting for table metadata lock
  • 【node学习】协程
  • Android 架构优化~MVP 架构改造
  • ES10 特性的完整指南
  • es6要点
  • hadoop入门学习教程--DKHadoop完整安装步骤
  • JavaScript 基本功--面试宝典
  • Just for fun——迅速写完快速排序
  • Laravel核心解读--Facades
  • MYSQL 的 IF 函数
  • Nginx 通过 Lua + Redis 实现动态封禁 IP
  • React+TypeScript入门
  • spring学习第二天
  • vue2.0开发聊天程序(四) 完整体验一次Vue开发(下)
  • 湖南卫视:中国白领因网络偷菜成当代最寂寞的人?
  • 前端学习笔记之观察者模式
  • 让你的分享飞起来——极光推出社会化分享组件
  • 如何选择开源的机器学习框架?
  • 使用docker-compose进行多节点部署
  • -- 数据结构 顺序表 --Java
  • 推荐一个React的管理后台框架
  • 一份游戏开发学习路线
  • 一些css基础学习笔记
  • 源码之下无秘密 ── 做最好的 Netty 源码分析教程
  • 中文输入法与React文本输入框的问题与解决方案
  • kubernetes资源对象--ingress
  • 如何用纯 CSS 创作一个菱形 loader 动画
  • ​香农与信息论三大定律
  • #{}和${}的区别是什么 -- java面试
  • #android不同版本废弃api,新api。
  • (02)vite环境变量配置
  • (1)Hilt的基本概念和使用
  • (3)选择元素——(14)接触DOM元素(Accessing DOM elements)
  • (C语言)编写程序将一个4×4的数组进行顺时针旋转90度后输出。
  • (纯JS)图片裁剪
  • (论文阅读30/100)Convolutional Pose Machines
  • (论文阅读31/100)Stacked hourglass networks for human pose estimation
  • (每日一问)操作系统:常见的 Linux 指令详解
  • (详细文档!)javaswing图书管理系统+mysql数据库
  • (原创)Stanford Machine Learning (by Andrew NG) --- (week 9) Anomaly DetectionRecommender Systems...