日期和时间

html

<div class="layui-inline"> <!-- 注意:这一层元素并不是必须的 -->
<input type="text" class="layui-input" id="test1">
</div>

js

layui.use(['carousel','laydate'], function() {
var carousel = layui.carousel,
laydate = layui.laydate; //常规轮播
carousel.render({
elem: '#test1'
/* ,full:true*/
/* ,width: '100%' //设置容器宽度
,height: '100%' //设置容器高度*/
, arrow: 'always'//始终显示箭头
,anim: 'default' //切换动画方式
,interval:'1000'//自动切换的时间间隔,不能低于800
,indicator:'inside'//指示器位置,如果设定了 anim:'updown',该参数将无效
/* ,arrow:'hover'*/
});
laydate.render({
elem: '#test2' //指定元素
,type:'date'
/*,range: true*/
,format:'yyyy-MM-dd'//默认格式
,value: new Date()//初始默认时间 2020-02-22
,min: '2017-1-1'
,max: 0
,theme: '#393D49'
,ready: function(date){
console.log(date); //得到初始的日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
}
,change: function(value, date, endDate){
console.log(value); //得到日期生成的值,如:2017-08-18
}
,done: function(value, date, endDate){
console.log(value); //得到日期生成的值,如:2017-08-18 }
});
})

如果运用layui多个插件,在定义用这种方式

时间与日期常用属性

type:
year; //年选择器
month; //年月选择器
date; //日期选择器(默认)
time; //时间选择器、
datetime; //日期时间选择器,可选择:年、月、日、时、分、秒 range:
范围选择
如果设置 true,将默认采用 “ - ” 分割。 你也可以直接设置 分割字符 :range: '~'

format
自定义格式:yyyy-MM-dd HH:mm:ss value:初始值 min/max:最小/最大范围内的日期值
如果值为字符类型,则:年月日必须用 -(中划线)分割时分秒必须用 :(半角冒号)号分割。这里并非遵循 format 设定的格式
如果值为整数类型,且数字<86400000,则数字代表天数,如:min: -7,即代表最小日期在7天前,正数代表若干天后
如果值为整数类型,且数字 ≥ 86400000,则数字代表时间戳,如:max: 4073558400000,即代表最大日期在:公元3000年1月1日

触发事件
//打开控件时触发
,ready: function(date){
console.log(date); //得到初始的日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
}
//年月日时间被切换时都会触发,回调返回三个参数,分别代表:生成的值、日期时间对象、结束的日期时间对象
,change: function(value, date, endDate){
console.log(value); //得到日期生成的值,如:2017-08-18
console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。
}
//点击日期、清空、现在、确定均会触发。回调返回三个参数,分别代表:生成的值、日期时间对象、结束的日期时间对象
,done: function(value, date, endDate){
console.log(value); //得到日期生成的值,如:2017-08-18
console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。
}
 



layui常用插件(二) 时间插件的更多相关文章

  1. layui 时间插件laydate ,取消回调

    背景:转型新公司不再是做前端展示H5之类的东西,主要业务是后台数据读取和插件搭建前端页面,接触的第一个老项目是layui制作的,由于业务需求,需要用到时间插件以下为时间插件的一些用法--------- ...

  2. layui 时间插件,change&&done,按照官网写法无效,解决方式!

    摘抄自 hahei2020:https://blog.csdn.net/hahei2020/article/details/79285370 layui 时间插件, 当选择时间或时间发生改变后,按照官 ...

  3. Springboot 系列(十二)使用 Mybatis 集成 pagehelper 分页插件和 mapper 插件

    前言 在 Springboot 系列文章第十一篇里(使用 Mybatis(自动生成插件) 访问数据库),实验了 Springboot 结合 Mybatis 以及 Mybatis-generator 生 ...

  4. 时间插件--daterangepicker使用和配置详解

    1.序言: daterangepicker是Bootstrap的一个时间组件,使用很方便 用于选择日期范围的JavaScript组件. 设计用于Bootstrap CSS框架. 它最初是为了改善报表而 ...

  5. 1、用datetimepicker插件实现限定时间范围的选择 2、时间插件实现默认当天的时间和只能选择小于今天的日期

    一.用datetimepicker插件实现限定时间范围的选择 1.下面是要实现的效果图,让开始时间只能从  2018-7-1  到 2018-7-7 选择. 2.html的结构 <div cla ...

  6. vue使用日期时间插件layDate

    项目中需要用到日期时间插件,尝试用bootstrap.element的时间插件都各有各的报错,对于一个菜鸟来说真的是很痛苦啊.终于,最后用了layDate实现了需要的功能 最终效果: 使用步骤: 1. ...

  7. selenium 难定位元素,时间插件,下拉框定位,string

    1.元素定位 ID定位元素: findElement(By.id(“”)); 通过元素的名称定位元素: findElement(By.name(“”)); 通过元素的html中的位置定位元素: fin ...

  8. selenium 难定位元素,时间插件,下拉框定位,string包含,定位列表中的一个,技巧

    关于frame: 如果网页存在iframe的话,传统的定位有时候找不到元素,需要切换frame: # 切换到leftFrame定位“测井设计” driver.switch_to_frame(" ...

  9. 时间插件-daterangepicker

    一款基于bootstrap的时间插件daterangepicker,顾名思义,主要用于时间区间选择,也可做单个时间选择 demo.1汉化版的一个时间选择案例 <!DOCTYPE html> ...

随机推荐

  1. 一个比CBitmap更优秀的类 -- CImage类

    Visual C++的CBitmap类的功能是比较弱的,它只能显示出在资源中的图标.位图.光标以及图元文件的内容,而不像VB中的Image控件可以显示出绝大多数的外部图像文件(BMP.GIF.JPEG ...

  2. 14 张思维导图构建 Python 核心知识体系

    ZOE是一名医学生,在自己博客分享了很多高质量的思维导图.本文中所列的 14 张思维导图(高清图见文末),是 17 年作者开始学习 Python 时所记录的,希望对大家有所帮助.原文:https:// ...

  3. MyEclipse 选中属性或方法后 相同的不变色

    myeclipse-->windows-->java-->Editor-->content Assist-->Mark Occurrencmyeclipse-->w ...

  4. JavaScript基础函数体中的唯一var模式(002)

    全局变量是不好的.所以在声名变量的时候,应该采用函数体中的唯一var模式(Single var Pattern).这个模式有不少好处: 提供了一个唯一的地方来查看函数体中声名的变量 在使用一个变量之前 ...

  5. hive中order by ,sort by ,distribute by, cluster by 的区别(**很详细**)

    hive 查询语法 select [all | distinct] select_ condition, select_ condition from table_name a [join table ...

  6. 关于数据文件的文件头1-P2

    文章目录 1 疑问点 2 问题模拟 2.1 dump 0,1块 2.2 查看trc文件 2.3 如何查看 1 疑问点 这里引用p2处的一段话: 事实上,每个文件的前128个块,都是文件头,被Oracl ...

  7. 「疫期集训day13」雾天

    我们千里迢迢赶来这里支援协约国----与德军正面交锋的美国士兵 今天考试签到题都没A,失误重大,T1几周前做过的拓扑排序板子都没写,T2失误在没敢调试,对自己信心不足,30分钟写了个DP,几分钟没调出 ...

  8. 朋友HDU - 5963 (思维题) 三种方法

    传送门 题目描述 输入 输出 样例输入 Sample Input 样例输出 Boys win! Girls win! Girls win! Boys win! Girls win! Boys win! ...

  9. 文件的f.seek和文件修改方式以及函数的基本使用

    1.文件f.seek的应用 import time with open('access.log', mode='rb') as f: # 1.将指针跳到文件末尾 # f.read() # 错误 f.s ...

  10. scrapy 基础组件专题(一):scrapy框架中各组件的工作流程

    Scrapy 使用了 Twisted 异步非阻塞网络库来处理网络通讯,整体架构大致如下(绿线是数据流向): Scrapy主要包括了以下组件: 引擎(Scrapy)用来处理整个系统的数据流处理, 触发事 ...