使用Layui时间组件(laydate)

2023-05-16

在一般的程序或者软件业务的操作上,通常涉及时间的记录,需要记录业务时间,或者根据时间来筛 选业务。
选择时间,可以直接输入,也可以弹出日期进行选择。
在layui中提供了,layDate日期时间模块,
主要提供了五种选择器:年选择器,年月选择器,日期选择器,时间选择器,日期时间选择器。

   <div class="layui-inline">
        <label class="layui-form-label">中文版:</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="Chinese" placeholder="yyyy-MM-dd">
            <i class="layui-icon Date_icon">&#xe637;</i>
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">国际版:</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="English" placeholder="yyyy-MM-dd">
            <i class="layui-icon Date_icon">&#xe637;</i>
        </div>
    </div>
    <div class="layui-inline mt-3">
        <label class="layui-form-label" style="width:120px;">日期时间选择器:</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="shijianriqi" placeholder="yyyy-MM-dd HH:mm:ss">
            <i class="layui-icon Date_icon">&#xe637;</i>
        </div>
    </div>
    <h6 class="mb-3 mt-3">嵌套显示</h6>
    <div class="site-demo-laydate">
        <div class="layui-inline mr-3" id="nestnne"></div>
        <div class="layui-inline ml-3" id="nestwo"></div>            
    </div>

  <script>
    //声明变量
    var layer, layDate;
    $(function () {
        //预加载模块
        layui.use(['layer', 'laydate'], function () {
            //加载模块
            layer = layui.layer;
            layDate = layui.laydate;
            //中文
            layDate.render({
                elem: '#Chinese',//绑定元素
                theme:'#393D49'//主题
            });
            //英文
            layDate.render({
                elem: '#English',
                lang: 'en',
                theme: '#ff0000'
            });
            //日期时间选择器
            layDate.render({
                elem: '#shijianriqi',
                type:'datetime',
                theme: '#000000'
            });
            //嵌套显示
            layDate.render({
                elem: '#nestnne',
                theme: '#ff0000',
                position: 'static'
            });
            layDate.render({
                elem: '#nestwo',
                lang: 'en',
                theme: '#ea7c12',
                position: 'static'//页面嵌套显示
            });
        });
    });
</script>

layui的laydate模块提供多属性支持,可嵌套在页面上,可设置主题的颜色等等。
layui的laydate模块,提供了type–控件选择类型:

type可选值名称用途
year年选择器只提供年列表选择
date年月选择器只提供年、月选择
year日期选择器可选择:年、月、日。type默认值,一般可不填
time时间选择器只提供时、分、秒选择
datetime日期时间选择器可选择:年、月、日、时、分、秒

laydate提供format属性–自定义时间格式 默认格式:yyyy-MM-dd
在这里插入图片描述
Layui的laydate时间日期控件中的中文版和英文版,其实区别不是很大,区别是弹出或嵌套显示的
时间日期选择页面中的中文全部英文形式代替,如果格式一样,那么进行选择后显示的是一样的。
主要以阿拉伯数字显示。

laydate详情请查看Layui官网:https://www.layui.com/

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

使用Layui时间组件(laydate) 的相关文章

  • layui文件上传+ThinkPHP5.1

    引入文件 1 前端html代码
  • layui中关于table表格reload后有缓存问题的解决办法

    问题描述 我在父窗口的table中的数据渲染方式不是异步请求后端 而是直接从后端加载数据 渲染到模板的时候直接渲染的 也就是下图中的data tableDatas 如下图 表格渲染 table render elem mytable tex
  • layui表格隐藏列的简单实现方法

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

    出现折叠面板无效 可能因为一下两点造成的 原因一 原因二 具体是为什么 我不清楚 正确的方式
  • 最细致的LayUI【前端框架】从入门到实战-快速搭建后台管理系统

    最细致的LayUI 前端框架 从入门到实战 快速搭建后台管理系统 LayUI学习思维导图 和 Bootstrap 有些相似 但该框架有个极大的好处就是定义了很多前后端交互的样式接口 如分页表格 只需在前端配置好接口 后端则按照定义好的接口规
  • layui导入文件时,如何动态传递参数

    需求 点击下图中的下拉框 在导入数据时 动态传递select的值 HTML代码如下 div class layui inline div
  • layui日期多选

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

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

    效果图 1 引入文件 注意 文件的位置不一样 引入的路径也不同 2 编写div样式 div style width 100 div class layui collapse div class layui c div div div
  • layui table 跨页、翻页记忆选择

    示例 table class layui table table layui 需要初始化的 form layui form layfilter layui layfilter table render
  • layui跨域问题

    由于浏览器存在同源策略 所以如果 layui 里面含图标字体文件 所在的地址与你当前的页面地址不在同一个域下 即会出现图标跨域问题 所以要么你就把 layui 与网站放在同一服务器 要么就对 layui 所在的资源服务器的 Response
  • 一款经典的ThinkPhp6开发的CMS内容管理系统

    项目介绍 一款 PHP 语言基于 ThinkPhp6 x Layui MySQL等框架精心打造的一款模块化 插件化 高性能的前后端分离架构敏捷开发框架 可用于快速搭建前后端分离后台管理系统 本着简化开发 提升开发效率的初衷 框架自研了一套个
  • LayUI之CRUD(增删改查)

    目录 前言 一 前端静态模板 二 用户管理后台代码 查看表 MySQL数据库 表结构 实体类 Dao方法 UserDao 查询 增加 删除 修改 测试后台dao方法 Junit UserDaoTest 查询 增加 修改 删除 web 三 用
  • LayUI系列(三)之动态添加选项卡

    文章目录 前言 一 什么是Tab选项卡 二 动态选项卡 1 通过网站查找layui选项卡的页面布局代码 2 动态添加选项卡 3 将选项卡的名称换成选中的菜单名称 4 已打开的选项卡不再重复打开 5 选择已被打开的选项卡则进行选项卡的转换 三
  • LayUI图片上传接口

    前端样式 div class layui upload drag i class layui icon xe67c i p 点击上传 或将文件拖拽到此处 p div js var uploadInst upload render elem
  • OA项目之项目整体业务分析【附项目原型图演示】

    Welcome Huihui s Code World 接下来看看由辉辉所写的关于OA项目的相关操作吧 目录 Welcome Huihui s Code World 一 项目简介 1 目的 2 人员名词解释 3 主界面展示 二 会议管理 1
  • 解决layui轮播图满屏是高度自适应的问题

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

    刚接触LayUI 几次出现 返回的数据异常 问题 皆是因为数据的格式不对 这里做个小笔记 一般的格式这个样子 data result array code gt 0 msg gt count gt 100 data gt
  • Layui框架的拖动上传 以及 时间选择器的基本使用

    上传用的layui的点击or拖动上传 其他上传也同理 不喜勿喷 欢迎补充 上代码 html div class layui form item style width 1 div
  • layui php+PHPExcel 拉取excel表格数据一键导入

    需求 大量数据需要导入数据库 直接拉取excel表格进行读取数据并存入数据库 过程中不对文件进行存储 使用上传过程中的缓存文件 前端代码 layui php

随机推荐

  • 如何购买云服务器----以华为云服务器为例

    进入华为云官网 https activity huaweicloud com 登入自己注册的账户 进入控制台 点击界面里我的资源 弹性云服务器ECS 点击右上角 购买弹性云服务器 按照自己的需求选择 xff0c 重点注意 xff1a 计费方
  • Java编写MapReduce的步骤

    Mapper 自定义类继承Mapper类重写自定义类中的map方法 xff0c 在该方法中将K1和V1转为K2和V2将生成的K2和V2写入上下文中 二 Reduce 自定义类继承Reduce类重写Reducer中的reduce方法 xff0
  • PX4入门及开发指南

    PX4入门及开发指南 用户手册开发者手册 用户手册 https docs px4 cc master zh index html 开发者手册 https dev px4 cc master zh index html
  • 树莓派编译工作空间卡死

    树莓派编译程序时遇到卡死 1 树莓派安装的Ubuntu mate 16 04 系统默认设置的swap交换空间不够 xff0c 而编译某些文件的时候需要较大的交换空间 xff0c 树莓派的交换空间被用满所以树莓派看起来好像是死机了的样子 xf
  • 超好用但是很多人不知道的的串口(网络)调试助手推荐

    小众但是超好用的串口 xff08 网络 xff09 调试助手 前言O ComToll xff08 串口 xff09 格西烽火串口网络调试助手伏特加串口 xff08 网络 xff09 调试助手windows自带的串口调试助手总结 前言 这里的
  • STM32上可用的的SM 2 3 4国密算法

    可在STM32上使用的国密算法 SM 2 3 4 SM2SM3SM4 下面直接给出代码 xff0c 有问题可评论 xff0c 自己改动的 xff0c 测试不到的地方可能有bug xff0c 欢迎指正 SM2 由于SM2算法牵扯到一些较为复杂
  • Stm32下环境传感器-Stlm75-hts221-spg30(Hal)

    Stm32下环境传感器 Stlm75 hts221 spg30 xff08 Hal xff09 简介IIC驱动接口Stlm75hts221Spg30 简介 Stlm75与Hts221都是ST的传感器 xff0c 有官方例程 xff0c 我只
  • vscode makefile编译方法实例

    c出来 o 使用 o出来 bin NB二人组走天下 xff0c 目标 xff1a 依赖 xff0c 下一行tab 加命令 感觉时比较块上手的教程 xff0c 手写AI c语言中文网的makefile c语言中文网的就是按部就班 xff0c
  • 树莓派(三):将你的树莓派进行镜像备份

    0 前言 就像备份电脑一样 xff0c 你一定不想树莓派出错后重新配置树莓派 xff0c 将你的树莓派进行备份 1 建立img镜像文件 随便找一个地方 xff0c 新建一个文本文档 xff0c 命名为 你喜欢的名字 img 这时候就会生成一
  • 接口的理解、接口匿名实现类的创建

    接口的概述 xff1a 一方面 xff0c 有时必须从几个类中派生出一个子类 xff0c 继承它们所有的属性和方法 但是 xff0c Java不支持多重继承 xff0c 有了接口 xff0c 就可以得到多重继承的效果 另一方面 xff0c
  • 关于大疆经纬M100进行二次开发视觉跟踪和视觉SLAM的求助

    本人第一次接触大疆的二次开发 xff0c 现在的需求是使用M100进行二次开发能够实现视觉跟踪目标 xff0c 并能够实现视觉SLAM xff0c 但是我没有接触过二次开发 xff0c 希望各位有过经验的大佬能够不吝留言给我说一下具体实现的
  • 定义一个接口CanFly,描述会飞的方法public void fly();

    1 使用类与接口的知识完成如下要求 xff1a xff08 1 xff09 定义一个接口CanFly xff0c 描述会飞的方法public void fly xff08 2 xff09 分别定义类飞机和鸟 xff0c 实现CanFly接口
  • 在Keil4中新建51单片机工程模板详细步骤

    本文主要介绍51单片机学习和开发中的第一步 新建工程模板 对于刚开始学单片机的同学 xff0c 首先要在电脑上装好MDK4软件和CH340驱动 xff0c 然后也要有一个单片机烧录软件 xff08 一般买回来的单片机附带的资料里都会有这三个
  • Java笔试常用库函数

    字符串转数组 String s span class token operator 61 span span class token string 34 13 34 span span class token punctuation spa
  • Pytorch极简入门教程(十六)——DenseNet提取特征

    Pytorch之DenseNet提取特征 导入必要的模块 span class token keyword import span torch span class token keyword from span torch span cl
  • 1. 创建一个功能包(package)

    一 ros所有的进程都需要在工作空间下进行 首先 xff0c 在 home文件夹 任何目录都可以 下创建一个工作空间 xff1a source span class token operator span opt span class to
  • 谷粒学院知识点总结

    文章目录 前言一 项目功能点1 后台管理系统功能2 前台系统功能3 总结项目技术点 二 项目问题三 项目描述1 总体介绍2 项目功能模块 amp 主要深入的模块3 项目涉及技术 前言 谷粒学院知识点总结 xff0c 准备实习面试 一 项目功
  • Win11家庭版U盘Pe安装

    目录 1 准备材料 2 安装 3 开机 4 需要安装的软件 5 封装 6 发现问题 未解决 1 准备材料 1 win11下载 MSDN 迅雷地址链接 2 驱动总裁 U盘魔术师 地址链接 2 安装 1 做好启动盘后 开机进pe 3 开机 准备
  • Android应用与硬件建立连接

    文章目录 1 建立连接的原理2 信件 和 邮递员 3 对方可能未收到如何处理4 接收 回信 5 多次数据交互6 小结 1 建立连接的原理 在实现软件与硬件交互的时候 xff0c 首先需要了解该硬件的构造 xff0c 运行流程等相关操作 xf
  • 使用Layui时间组件(laydate)

    在一般的程序或者软件业务的操作上 xff0c 通常涉及时间的记录 xff0c 需要记录业务时间 xff0c 或者根据时间来筛 选业务 选择时间 xff0c 可以直接输入 xff0c 也可以弹出日期进行选择 在layui中提供了 xff0c