全部参数

一、核心方法：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. UVa 10917 Dijkstra

    本来就是水题一道. 题意:一个人要从点1去到点2,中间还有很多点和很多条边.问你如果他每次走的边(a,b)都满足:a点到目标点的最短距离<b点到目标点的最短距离,那么他从点1出发到点2总共有多少 ...

  2. DELPHI实现百度开放平台

    学习百度语音 百度语音开发平台 http://yuyin.baidu.com/ 百度开发者账号 13600514494,短信登录 应用账号 词语听写 App ID: 7799366 API Key: ...

  3. android、IOS和手机基础知识

    一.手机基础知识 1.固件.刷固件.固件版本 固件是指固化的软件,英文为firmware,它是把某个系统程序写入到特定的硬件系统中的flashROM.手机固件相当于手机的系统,刷新固件就相当于刷系统. ...

  4. java综合实训第二次

  5. 使用JDOM操作XML

    JDOM介绍 JDOM是使用Java语言编写的,用于读写及操作XML的一套组件,Jdom同时具有DOM修改文件的优点和SAX读取快速的优点. JDOM的使用 首先下载JDOM的JAR包,本文使用的是j ...

  6. Xcode奔溃错误码

    在这里了解一下XCode用来表示各种崩溃类型的术语,补充一些这方面的各知识.崩溃通常是指操作系统向正在运行的程序发送的信号,所以我们在查看崩溃日志时,常常看到如下错误摘要:Application re ...

  7. 学习激动人心的C++ 11

    1->创建7个Thread,跑个非常大的循环.观察CPU void func(string &name) { ;i<0xFFFFFFFF;i++) { //cout << ...

  8. 学习Linux系列--安装软件环境

    本系列文章记录了个人学习过程的点点滴滴. 回到目录 10.安装Lamp套件. 最简单的方式,如下 sudo tasksel install lamp-server Apache 菜鸟教程 Ubuntu ...

  9. winfrom 文字滚动

    winfrom 文字滚动 http://www.codeproject.com/Articles/6913/Creating-a-professional-looking-GDI-drawn-cust ...

  10. html table表头斜线

    关于htnl的table的表头斜线,符合表格设计规范,<style> .biaotou { line-height: 5px; text-align: left; } .biaotou { ...