<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>日期</title>

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

    </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-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="../layui/layui.js"></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的日历组件使用的更多相关文章

  1. Vue.js 源码分析(二十八) 高级应用 transition组件 详解

    transition组件可以给任何元素和组件添加进入/离开过渡,但只能给单个组件实行过渡效果(多个元素可以用transition-group组件,下一节再讲),调用该内置组件时,可以传入如下特性: n ...

  2. 微信小程序把玩（二十八）image组件

    原文:微信小程序把玩(二十八)image组件 image组件也是一个程序不可缺少的,可以这样说一个app中image组件随处可以看到,一般 image有两种加载方式第一种是网络图片第二种是本地图片资源 ...

  3. Bootstrap <基础二十八>列表组

    列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...

  4. VMware vSphere 服务器虚拟化之二十八 桌面虚拟化之安装View传输服务器

    VMware vSphere 服务器虚拟化之二十八 桌面虚拟化之安装View传输服务器 View 传输服务器用于管理和简化数据中心与在最终用户本地系统上检出使用的 View 桌面之间的数据传输.必须安 ...

  5. Web 前端开发人员和设计师必读文章推荐【系列二十八】

    <Web 前端开发精华文章推荐>2014年第7期(总第28期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  6. Citrix 服务器虚拟化之二十八 XenApp6.5发布文档内容

    Citrix 服务器虚拟化之二十八  XenApp 6.5发布文档内容 XenApp可发布以下类型的资源向用户提供信息访问,这些资源可在服务器或桌面上虚拟化: 1)  服务器桌面:发布场中服务器的整个 ...

  7. WCF技术剖析之二十八：自己动手获取元数据[附源代码下载]

    原文:WCF技术剖析之二十八:自己动手获取元数据[附源代码下载] 元数据的发布方式决定了元数据的获取行为,WCF服务元数据架构体系通过ServiceMetadataBehavior实现了基于WS-ME ...

  8. Bootstrap入门（二十八）JS插件5：工具提醒

    Bootstrap入门(二十八)JS插件5:工具提醒 工具提示在使用过程中比较常见,但是实现起来有些麻烦,而bootstrap则很好地解决了这个问题. 我们来写一个简单的实例 先引入CSS文件和JS文 ...

  9. mysql进阶(二十八)MySQL GRANT REVOKE用法

    mysql进阶(二十八)MySQL GRANT REVOKE用法   MySQL的权限系统围绕着两个概念: 认证->确定用户是否允许连接数据库服务器: 授权->确定用户是否拥有足够的权限执 ...

  10. JAVA之旅（二十八）——File概述，创建，删除，判断文件存在，创建文件夹，判断是否为文件/文件夹，获取信息，文件列表,文件过滤

    JAVA之旅(二十八)--File概述,创建,删除,判断文件存在,创建文件夹,判断是否为文件/文件夹,获取信息,文件列表,文件过滤 我们可以继续了,今天说下File 一.File概述 文件的操作是非常 ...

随机推荐

  1. CSS float的相关图文详解（一）

    大家好,作为一个刚入门的小前端,第一次写博客,很是鸡冻.由于涉猎较浅,有些知识可能说的不清楚,或者有什么错误,欢迎留言指正.我的第一篇博客写的关于css的浮动的.想必很多小伙伴特别是刚学的,对浮动有一 ...

  2. python之错误调试

    无论谁写的程序,必定会存在bug,解决bug需要我们去调试程序.于是乎,在Python中,就会好几种调试手段,如print.assert.logging.pdb.pdb.set_trace() 一.使 ...

  3. C#组件系列——又一款日志组件：Elmah的学习和分享

    前言:好久没动笔了,都有点生疏,12月都要接近尾声,可是这月连一篇的产出都没有,不能坏了“规矩”,今天还是来写一篇.最近个把月确实很忙,不过每天早上还是会抽空来园子里逛逛.一如既往,园子里每年这个时候 ...

  4. git http服务免登录实现（免去每次请求用户名密码输入，Visual Studio可用）

    最近用了Bonobo搭起了Git服务,弄了个批处理文件来避免每次都要输入用户名密码. 此脚本分为三个步骤:1.添加用户变量HOME:2.添加用户_netrc文件:3.添加windows普通凭据(因为V ...

  5. EF 批量 添加 修改 删除

    1批量添加    db.T_Investigator.AddRange(list) 2批量删除    db.T_Investigator.RemoveRange(list) 3批量修改   for 循 ...

  6. 轻松搞定RocketMQ入门

    RocketMQ是一款分布式.队列模型的消息中间件,具有以下特点: 能够保证严格的消息顺序 提供丰富的消息拉取模式 高效的订阅者水平扩展能力 实时的消息订阅机制 亿级消息堆积能力 RocketMQ网络 ...

  7. Vim设置Tab宽度/替换Tab为空格

    用户配置: 在/home/you/.vimrc中添加以下代码后,重启vim即可实现按TAB产生4个空格:set ts=4  (注:ts是tabstop的缩写,设TAB宽4个空格)set expandt ...

  8. es6 Symbol类型

    es6 新增了一个原始类型Symbol,代表独一无二的数据 javascript 原来有6中基本类型, Boolean ,String ,Object,Number, null , undefined ...

  9. 关系型数据库中主键（primary key）和外键（foreign key）的概念。

    刚接触关系型数据库的同学,会听过主键和外键的概念.这是关系型数据库的基本概念,需要清楚理解.今天我就以简洁的语言总结一下这个概念. 主键.一句话概括:一张表中,可以用于唯一标识一条记录的字段组(或者说 ...

  10. ajax请求code:200但是进入error函数

    1.dataType 由json改成text; 2.后台报错了