日期和时间

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. dart快速入门教程 (7.2)

    7.4.抽离类为单独文件 新建一个文件,单独存放一个类,例如:Person类抽离到person.dart文件中 class Person { final String name; final num ...

  2. Java中时间加减的比较

    public class TestDate{ public static void main(String[] args){try{ Date date=new Date(); DateFormat  ...

  3. cron表达式详解,cron表达式写法,cron表达式例子

    (cron = "* * * * * *") cron表达式格式:{秒数} {分钟} {小时} {日期} {月份} {星期} {年份(可为空)}例  "0 0 12 ? ...

  4. tomcat结合shiro无文件webshell的技术研究以及检测方法

    0x01简介 shiro结合tomcat回显,使用公开的方法,回显大多都会报错.因为生成的payload过大,而tomcat在默认情况下,接收的最大http头部大小为8192.如果超过这个大小,则to ...

  5. 洛谷 P4408 [NOI2003]逃学的小孩

    题目传送门 题目描述 Chris家的电话铃响起了,里面传出了Chris的老师焦急的声音:“喂,是Chris的家长吗?你们的孩子又没来上课,不想参加考试了吗?”一听说要考试,Chris的父母就心急如焚, ...

  6. 手把手教你玩转Git

    文章已托管到GitHub,大家可以去GitHub查看下载!并搜索关注微信公众号 码出Offer 领取各种学习资料! 微信公众号码出Offer Git应用 一.初识Git 1.1 Git的简史 同生活中 ...

  7. 攻防世界FlatScience

    访问robots.txt发现 admin.php和login.php 在admin.php和login.php分别尝试注入 发现login.php页面存在注入,并且根据报错得知数据库类型为sqlite ...

  8. python 装饰器(五):装饰器实例(二)类装饰器(类装饰器装饰函数)

    回到装饰器上的概念上来,装饰器要求接受一个callable对象,并返回一个callable对象(不太严谨,详见后文). 那么用类来实现也是也可以的.我们可以让类的构造函数__init__()接受一个函 ...

  9. During handling of the above exception, another exception occurred:

    今天在计算机矩阵相关性,准备删除相关性高的列中,出现了这样的问题: During handling of the above exception, another exception occurred ...

  10. df['']和df[['']]的区别