全部参数

一、核心方法：laydate(options);

options是一个对象，它包含了以下key: '默认值'

{

  elem: '#id', //需显示日期的元素选择器

  event: 'click', //触发事件

  format: 'YYYY-MM-DD hh:mm:ss', //日期格式

  istime: false, //是否开启时间选择

  isclear: true, //是否显示清空

  istoday: true, //是否显示今天

  issure: true, 是否显示确认

  festival: true //是否显示节日

  min: '1900-01-01 00:00:00', //最小日期

  max: '2099-12-31 23:59:59', //最大日期

  start: '2014-6-15 23:00:00',  //开始日期

  fixed: false, //是否固定在可视区域

  zIndex: 99999999, //css z-index

  choose: function(dates){ //选择好日期的回调

  }

}

二、其它方法/属性

laydate.v   //获取laydate版本号

laydate.skin(lib);  //加载皮肤，参数lib为皮肤名

/*

  layer.now支持多类型参数。timestamp可以是前后若干天，也可以是一个时间戳。format为日期格式，为空时则采用默认的“-”分割。

  如laydate.now(-2)将返回前天，laydate.now(3999634079890)将返回2096-09-28

*/

layer.now(timestamp, format);   //该方法提供了丰富的功能，推荐灵活使用。

laydate.reset();  //重设日历控件坐标，一般用于页面dom结构改变时。无参

基本实现效果

例1：

<!doctype html>

<html>

<head>

  <meta charset="utf-8">

  <title>layui</title>

  <meta name="renderer" content="webkit">

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  <link rel="stylesheet" href="css/layui.css"  media="all">

</head>

<body>

<blockquote class="layui-elem-quote">目前Layui中的日期组件还是layDate 1.1的改良版，它后续将会进行一次重写。</blockquote>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">

  <legend>顺便列举几个常用例子</legend>

</fieldset>

<div class="layui-inline">

  <input class="layui-input" placeholder="自定义日期格式" onclick="layui.laydate({elem: this, istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">

</div>

<div class="layui-inline">

  <input class="layui-input" placeholder="开启节日" onclick="layui.laydate({elem: this, festival: true})">

</div>

<div class="layui-inline">

  <input class="layui-input" placeholder="只能选昨天到明天" onclick="layui.laydate({elem: this, min: laydate.now(-1), max: laydate.now(+1)})">

</div>

<div class="layui-form-pane" style="margin-top: 15px;">

  <div class="layui-form-item">

    <label class="layui-form-label">范围选择</label>

    <div class="layui-input-inline">

      <input class="layui-input" placeholder="开始日" id="LAY_demorange_s">

    </div>

    <div class="layui-input-inline">

      <input class="layui-input" placeholder="截止日" id="LAY_demorange_e">

    </div>

  </div>

</div>

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

<script src="layui.js" charset="utf-8"></script>

<script>

layui.use('laydate', function(){

  var laydate = layui.laydate;

  var start = {

    min: laydate.now()

    ,max: '2099-06-16 23:59:59'

    ,istoday: false

    ,choose: function(datas){

      end.min = datas; //开始日选好后，重置结束日的最小日期

      end.start = datas //将结束日的初始值设定为开始日

    }

  };

  var end = {

    min: laydate.now()

    ,max: '2099-06-16 23:59:59'

    ,istoday: false

    ,choose: function(datas){

      start.max = datas; //结束日选好后，重置开始日的最大日期

    }

  };

  document.getElementById('LAY_demorange_s').onclick = function(){

    start.elem = this;

    laydate(start);

  }

  document.getElementById('LAY_demorange_e').onclick = function(){

    end.elem = this

    laydate(end);

  }

});

</script>

</body>

</html>

日期时间组件 - layui.laydate的更多相关文章

  1. 27flutter日期 时间组件flutter_cupertino_date_picker的使用

    pubspec.yaml flutter_cupertino_date_picker: ^ DatePicker.dart import 'package:date_format/date_forma ...

  2. 如何在Rails6内通过Webpacker使用JavaScript; flatpicker日期时间组件选择器

    如何在Rails6内通过Webpacker使用JavaScript; Rails6默认不再使用asset pipeline,改用Webpacker. 文件结构变化: 配置文件: webpacker.y ...

  3. 日期控件,layui

    <link rel="stylesheet" href="<%=path%>/layui/css/layui.css" type=" ...

  4. 关于layui的日期和时间组件laydate闪屏的坑

    https://blog.csdn.net/liangwenli_/article/details/82786713 jsp页面: <input type="text" cl ...

  5. easyui基于 layui.laydate日期扩展组件

    本人后端开发码农一个,公司前端忙的一逼,项目使用的是easyui组件,其自带的datebox组件使用起来非常不爽,主要表现在 1.自定义显示格式很麻烦 2.选择年份和月份用户体验也不好 网上有关于和M ...

  6. layDate 日期与时间组件 入门

    首先第一步 在官方下载layDate文件.layUI官网:http://layer.layui.com/    https://www.layui.com/laydate/ layDate文件的下载步 ...

  7. layui之日期和时间组件

    参考文档:https://www.layui.com/doc/modules/laydate.html代码片段如下: layui.use('laydate', function(){ var layd ...

  8. laydate时间组件

    laydate时间组件使用笔记 /*! laydate-v5.0.9 日期与时间组件 MIT License http://www.layui.com/laydate/ By 贤心 */ ;!func ...

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

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

随机推荐

  1. [转]Android SDK更新 Connection to http://dl-ssl.google.com refused 解决方法

    问题描述 使用SDK Manager更新时出现问题Failed to fetch URL https://dl-ssl.google.com/android/repository/repository ...

  2. vim编辑指令（转)

    跳跃指令 类似于游览器中的<前进><后退>按钮  CTRL-] -> 跟着link/tag转入 (follow link/tag)  CTRL-o -> 回到上一次 ...

  3. mysql 启动不了了

    在做测试的工程中,发现mysql启动失败,报错信息如下: --03T08::.969163Z mysqld_safe mysqld from pid file /var/data/my3306/run ...

  4. 09A-独立按键消抖实验01——小梅哥FPGA设计思想与验证方法视频教程配套文档

    芯航线--普利斯队长精心奉献   实验目的: 1.复习状态机的设计思想并以此为基础实现按键消抖 2.单bit异步信号同步化以及边沿检测 3.在激励文件中学会使用随机数发生函数$random 4.仿真模 ...

  5. iOS中什么是superView？（新手概念简述版）

    文/司马陶冶(简书作者)/文章有删改原文链接:http://www.jianshu.com/p/8537dac37852 著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 在iPhone ...

  6. Submit Text 快捷键总结

    Ctrl+D : 选择单词,重复可增加选择下一个相同的单词Ctrl+F : 查找内容Ctrl+G : 跳转到指定行Ctrl+H : 替换    Ctrl+J : 合并行(已选择需要合并的多行时)Ctr ...

  7. C++中的4个类型转换关键字

    转载:http://poplars.blog.163.com/blog/static/1394221742013021111210567/ n多书里面推荐要养成使用转型关键字的习惯,几年过去了,感觉还 ...

  8. 我人生中的jQuery选择器

    Jquery选择器 一.Jquery选择器简介 JavaScript只是一种运行于客户端,可以被客户端浏览器解析的一段代码.它和java没有任何关系.JavaScript简称JS.jQuery是对JS ...

  9. 表单 阻止 技巧 JavaScript js

    阻止表单的提交,可以用return false 来进行阻止 长度不低于6,不高于20 if(username.length < 6 || username>20){ alert (&quo ...

  10. Jenkins安装与基本配置

    环境:centos 6.5,jenkins依赖jdk,当前版本推荐jdk1.8,1.7也可以用 首先,机器应该可以访问外网,用yum安装即可(这里版本号是2.19.4): wget -O /etc/y ...