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 相关文章推荐
DEFER怎么用?
Jul 01 Javascript
js href的用法
May 13 Javascript
Javascript 类型转换方法
Oct 24 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
Mar 28 Javascript
Javascript表单验证要注意的事项
Sep 29 Javascript
ionic组件ion-tabs选项卡切换效果实例
Aug 27 Javascript
纯js实现动态时间显示
Sep 07 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
Jul 26 Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
Sep 21 Javascript
jquery实现点击左右按钮切换图片
Jan 27 jQuery
如何理解Vue简单状态管理之store模式
May 15 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
一步一步学习PHP(1) php开发环境配置
2010/02/15 PHP
php在服务器执行exec命令失败的解决方法
2012/03/03 PHP
ThinkPHP打开验证码页面显示乱码的解决方法
2014/12/18 PHP
Yii快速入门经典教程
2015/12/28 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
2015/11/16 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
轻松理解JavaScript闭包
2017/03/14 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
vue的diff算法知识点总结
2018/03/29 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
2019/04/02 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
python的几种矩阵相乘的公式详解
2019/07/10 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
使用CSS变量实现炫酷惊人的悬浮效果
2019/04/26 HTML / CSS
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
如何判断计算机可能已经中马
2013/03/22 面试题
家具厂厂长岗位职责
2014/01/01 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
孔子观后感
2015/06/08 职场文书
红色故事汇观后感
2015/06/18 职场文书