laydate时间日历插件使用方法详解


Posted in Javascript onNovember 14, 2018

本文为大家分享了laydate时间日历插件的使用方法,供大家参考,具体内容如下

1、前言

在处理页面表单的时候,会遇到日期类型的数据,我们可以通过时间插件的让用户来选择具体的时间,这样就会比较方便。今天记录一下laydate这个时间插件。

2、代码展示

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>测试时间插件</title>
</head>
<body>
<div>
  <h3>开始和结束的相互制约</h3>
  开始日:<div class="laydate-icon" id="start" style="width:200px; margin-right:10px"></div>
  结束日:<div class="laydate-icon" id="end" style="width:200px"></div>
</div>
<hr/>
<div>
  <h3>日历结构详解</h3>
  日历插件:<input class="laydate-icon" id="time" />
</div>
</body>
<!-- 用法:直接引入laydate.js -->
<script type="text/javascript" src="laydate/laydate.js"></script>
<script type="text/javascript">
  laydate.skin("molv");//设置皮肤
  var start = {
    elem: '#start',
    format: 'YYYY/MM/DD hh:mm:ss',
    min: laydate.now(), //设定最小日期为当前日期
    max: '2099-06-16 23:59:59', //最大日期
    istime: true,
    istoday: false,
    choose: function(datas){
      end.min = datas; //开始日选好后,重置结束日的最小日期
    }
  };
  var end = {
    elem: '#end',
    format: 'YYYY/MM/DD hh:mm:ss',
    min: laydate.now(),
    max: '2099-06-16 23:59:59',
    istime: true,
    istoday: false,
    choose: function(datas){
      start.max = datas; //结束日选好后,重置开始日的最大日期
    }
  };
  laydate(start);
  laydate(end);

  var time = {
    elem:'#time',
    format:'YYYY-MM-DD hh:mm:ss',
    min:laydate.now(),
    max:'2999-12-31 23:59:59',
    istime:true,//是否显示时分秒
    istoday:true,//是否显示【今天】的按钮
    isclear:true,//是否显示【清空】的按钮
    festival: true,//是否显示节日
    start: laydate.now(0,"YYYY-MM-DD hh:mm:ss"), // 开始日期
    fixed: false,  // 是否固定在可视区域
    zIndex: 10000, // css控制图层的遮罩效果(效果不明显)
    choose: function(dates){ // 选择好日期的回调
    }
  }
  laydate(time);

  /*
  * laydate.now(timestamp, format)这个函数中timestamp既可以是时间戳也可以是天数
  * laydate.now(+1):表示比当前时间迟一天
  * laydate.now(-1):表示比当前时间早一天
  *
  * laydate.now(3999634079890):表示2096-09-28
  *
  * format可以随意指定显示的日期格式,不指定就会显示默认的日期格式。如果需要指定当前的具体的时分秒,就可以使用时间戳(毫秒值)
  *
  * 如:laydate.now(new Date().getTime()+300000,"YYYY-MM-DD hh:mm:ss")表示比当前时间的晚5分钟
  * JS中获取当前时间的时间戳:new Date().getTime()
  *
  * laydate.reset(); // 重设日历控件坐标,一般用于页面dom结构改变时。无参
  *
  * 官网:https://www.layui.com/laydate
  * */
</script>
</html>

3、页面展示

laydate时间日历插件使用方法详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 设置某DIV区域内的checkbox复选框
Nov 30 Javascript
javascript学习笔记(三) String 字符串类型介绍
Jun 19 Javascript
JavaScript实现数字数组正序排列的方法
Apr 06 Javascript
Bootstrap表单组件教程详解
Apr 26 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 Javascript
js数组去重的N种方法(小结)
Jun 07 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
javascript中函数的写法实例代码详解
Oct 28 Javascript
angular学习之动态创建表单的方法
Dec 07 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 Javascript
vue+elementUI动态生成面包屑导航教程
Nov 04 Javascript
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 #jQuery
你应该了解的JavaScript Array.map()五种用途小结
Nov 14 #Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
Nov 14 #Javascript
Vue 框架之动态绑定 css 样式实例分析
Nov 14 #Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
Nov 14 #Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 #Javascript
Vue源码探究之状态初始化
Nov 14 #Javascript
You might like
教你IIS6的PHP最佳配置方法
2006/09/05 PHP
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
2014/01/14 PHP
php调整服务器时间的方法
2015/04/03 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
Zend Framework教程之前端控制器Zend_Controller_Front用法详解
2016/03/07 PHP
PHP用mysql_insert_id()函数获得刚插入数据或当前发布文章的ID
2016/11/25 PHP
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
2017/06/30 PHP
JS查看对象功能代码
2008/04/25 Javascript
JS学习之一个简易的日历控件
2010/03/24 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
JavaScript生成的动态下雨背景效果实现方法
2015/02/25 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
2016/04/17 Javascript
canvas绘制表盘时钟
2017/01/23 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
基于nodejs的微信JS-SDK简单应用实现
2019/05/21 NodeJs
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
python实现登录与注册系统
2020/11/30 Python
Python之多进程与多线程的使用
2021/02/23 Python
英国著名音像制品和图书游戏购物网站:Zavvi
2016/08/04 全球购物
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
台湾SHOPRO购物行家:亚洲首创影视.3C.家电.优质购物平台
2018/05/07 全球购物
一套PHP的笔试题
2013/05/31 面试题
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
升职自荐信范文
2013/10/05 职场文书
岗位职责的含义
2013/11/17 职场文书
人事专员的岗位职责
2014/03/01 职场文书
大专学生求职自荐信
2014/07/06 职场文书
部门群众路线教育实践活动对照检查材料思想汇报
2014/10/07 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
创业计划书之宠物店
2019/09/19 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书
Java使用Unsafe类的示例详解
2021/09/25 Java/Android