全部参数

一、核心方法：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. js-sort数组排序

    婆婆妈妈,直上代码: <body> <div> sort()对数组排序,不开辟新的内存,对原有数组元素进行调换 </div> <div id="sh ...

  2. 关于yuv格式

    首先,内存分布        1:YUV420          (1):I420:              YYYYYYYY UU VV    =>YUV420P          (2): ...

  3. a

    #region DataTable转Json        /// <summary>        /// 将DataTable中的数据转换为JSON字符串,只返回[{...},{... ...

  4. C语言-《通讯录》

    黑白的通讯录 --1-- 需求分析 1.1 需求 1.2 原型展示 1.3 功能分析 --2-- 代码实现 2.1 外部声明.变量.宏 2.2 模块实现 ----------------------- ...

  5. android应用刷新系统多媒体库（增加or删除多媒体文件）

    系统:android4.4及其以上 功能:app中拍照, 并实现浏览.删除照片操作. 实现: 1.拍照,存储到指定路径path 2.通知系统多媒体数据库刷新数据. 主要使用MediaScannerCo ...

  6. Mac > 编写跨平台桌面应用开发工具，基于 Web 技术

    Electron: The Electron framework lets you write cross-platform desktop applications using JavaScript ...

  7. [转载]Back up all of your mysql databases nightly

    原文地址:http://www.linuxbrigade.com/back-up-all-of-your-mysql-databases-nightly/ Put the following into ...

  8. 更新maven库

    删除所在本地仓库的文件夹,例如: 然后,重新下载一个jar包,放到工程的文件夹,注意名字要不同,否则maven库不予更新,替换完成后,点击工程,maven,update project即可,再次查看M ...

  9. 客户端实现蓝牙接收(C#)

    知识总结发布  (转载) 网上有关蓝牙接收的资料很多,使用起来也很简单,但是我觉得还是有必要把这些知识总结下来,蓝牙开发需要用到一个第三方的库InTheHand.Net.Personal.dll,感兴 ...

  10. 遗传算法在JobShop中的应用研究（part 5：解码）

    解码操作是整个遗传算法最重要的一步,在这步里面我们利用配置文件中的信息将染色体解码成一个有向无环图. 在介绍解码操作之前我们先来看一下配置文件,在part1绪论中我们已经介绍了一个车间调度问题的基本信 ...