全部参数

一、核心方法：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. java获取文件的md5值

    import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import ja ...

  2. STM32下FatFs的移植，实现了坏块管理，硬件ECC，ECC纠错，并进行擦写均衡分析

    最近因项目需要,做一个数据采集的单片机平台.需要移植 FatFs .现在把最后成果贴上来. 1.摘要 在 STM32 单片机上,成功移植 FatFs 0.12b,使用的 Nand Flash 芯片为 ...

  3. webstorm--破解

    2016.2.2 版本的破解方式: 安装以后,打开软件会弹出一个对话框:选择"license server" 输入:http://114.215.133.70:41017 2016 ...

  4. win7下matlab2016a配置vlfeat

    1.下载vlfeat http://www.vlfeat.org/ 2.解压到了matlab安装目录的toolbox下 3.打开vs2013的这个 4.输入nmake version  查看我的版本是 ...

  5. 对c++ public、protected、private关键字的理解

    首先要明确一下: 1.这三个关键字在两种地方会用到,一个是对类的成员变量和成员函数修饰时(比如私有的成员变量,受保护的成员变量·,公有的函数),还有一种是对继承方式的修饰(比如公有继承,保护继承). ...

  6. linux下发现可疑用户时处理办法

    如果发现了linux被可疑用户远程登录了,怎么解决呢? 1.先查看最近系统的登录情况 last -10 表示最近10个用户登录的信息,如果发现有可疑账户,就是密码被破解了 [root@localhos ...

  7. cygwin安装

    我安装的是cygwin2.5.2,相关下载:https://cygwin.com/setup-x86_64.exe 先安装cygwin,x86_64版本,安装时选择库(gcc-core.gcc-c++ ...

  8. Sublime Text 3 个人开发习惯

    1.添加author.date到函数注释里面 docblockr插件 a.preferences--package settings--docblockr--settings-user点击打开 b.在 ...

  9. 微信iphone7、 ios10播放视频解决方案 2016.11.10

    2016.11.10日更新以下方法 微信最新出同层播放规范 即使是官方的也无法解决所有android手机的问题. 另外iphone 5 .5s 某些手机始终会弹出播放,请继续采用 “以下是老的解决办法 ...

  10. java贪吃蛇

    这个贪吃蛇有很多功能没有实现,比如说穿墙(本来可以实现,但是穿墙后,就会出现坐标混乱,吃不到食物了),还有碰到自己的身体死亡的情况也没有实现,现在我知道如何判断是否碰到身体,但是,我不知道,如何处理碰 ...