layui常用插件(二) 时间插件
日期和时间
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常用插件(二) 时间插件的更多相关文章
- layui 时间插件laydate ,取消回调
背景:转型新公司不再是做前端展示H5之类的东西,主要业务是后台数据读取和插件搭建前端页面,接触的第一个老项目是layui制作的,由于业务需求,需要用到时间插件以下为时间插件的一些用法--------- ...
- layui 时间插件,change&&done,按照官网写法无效,解决方式!
摘抄自 hahei2020:https://blog.csdn.net/hahei2020/article/details/79285370 layui 时间插件, 当选择时间或时间发生改变后,按照官 ...
- Springboot 系列(十二)使用 Mybatis 集成 pagehelper 分页插件和 mapper 插件
前言 在 Springboot 系列文章第十一篇里(使用 Mybatis(自动生成插件) 访问数据库),实验了 Springboot 结合 Mybatis 以及 Mybatis-generator 生 ...
- 时间插件--daterangepicker使用和配置详解
1.序言: daterangepicker是Bootstrap的一个时间组件,使用很方便 用于选择日期范围的JavaScript组件. 设计用于Bootstrap CSS框架. 它最初是为了改善报表而 ...
- 1、用datetimepicker插件实现限定时间范围的选择 2、时间插件实现默认当天的时间和只能选择小于今天的日期
一.用datetimepicker插件实现限定时间范围的选择 1.下面是要实现的效果图,让开始时间只能从 2018-7-1 到 2018-7-7 选择. 2.html的结构 <div cla ...
- vue使用日期时间插件layDate
项目中需要用到日期时间插件,尝试用bootstrap.element的时间插件都各有各的报错,对于一个菜鸟来说真的是很痛苦啊.终于,最后用了layDate实现了需要的功能 最终效果: 使用步骤: 1. ...
- selenium 难定位元素,时间插件,下拉框定位,string
1.元素定位 ID定位元素: findElement(By.id(“”)); 通过元素的名称定位元素: findElement(By.name(“”)); 通过元素的html中的位置定位元素: fin ...
- selenium 难定位元素,时间插件,下拉框定位,string包含,定位列表中的一个,技巧
关于frame: 如果网页存在iframe的话,传统的定位有时候找不到元素,需要切换frame: # 切换到leftFrame定位“测井设计” driver.switch_to_frame(" ...
- 时间插件-daterangepicker
一款基于bootstrap的时间插件daterangepicker,顾名思义,主要用于时间区间选择,也可做单个时间选择 demo.1汉化版的一个时间选择案例 <!DOCTYPE html> ...
随机推荐
- dart快速入门教程 (7.2)
7.4.抽离类为单独文件 新建一个文件,单独存放一个类,例如:Person类抽离到person.dart文件中 class Person { final String name; final num ...
- Java中时间加减的比较
public class TestDate{ public static void main(String[] args){try{ Date date=new Date(); DateFormat ...
- cron表达式详解,cron表达式写法,cron表达式例子
(cron = "* * * * * *") cron表达式格式:{秒数} {分钟} {小时} {日期} {月份} {星期} {年份(可为空)}例 "0 0 12 ? ...
- tomcat结合shiro无文件webshell的技术研究以及检测方法
0x01简介 shiro结合tomcat回显,使用公开的方法,回显大多都会报错.因为生成的payload过大,而tomcat在默认情况下,接收的最大http头部大小为8192.如果超过这个大小,则to ...
- 洛谷 P4408 [NOI2003]逃学的小孩
题目传送门 题目描述 Chris家的电话铃响起了,里面传出了Chris的老师焦急的声音:“喂,是Chris的家长吗?你们的孩子又没来上课,不想参加考试了吗?”一听说要考试,Chris的父母就心急如焚, ...
- 手把手教你玩转Git
文章已托管到GitHub,大家可以去GitHub查看下载!并搜索关注微信公众号 码出Offer 领取各种学习资料! 微信公众号码出Offer Git应用 一.初识Git 1.1 Git的简史 同生活中 ...
- 攻防世界FlatScience
访问robots.txt发现 admin.php和login.php 在admin.php和login.php分别尝试注入 发现login.php页面存在注入,并且根据报错得知数据库类型为sqlite ...
- python 装饰器(五):装饰器实例(二)类装饰器(类装饰器装饰函数)
回到装饰器上的概念上来,装饰器要求接受一个callable对象,并返回一个callable对象(不太严谨,详见后文). 那么用类来实现也是也可以的.我们可以让类的构造函数__init__()接受一个函 ...
- During handling of the above exception, another exception occurred:
今天在计算机矩阵相关性,准备删除相关性高的列中,出现了这样的问题: During handling of the above exception, another exception occurred ...
- df['']和df[['']]的区别