<!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. 痞子衡嵌入式：史上最强ARM Cortex-M学习资源汇总(持续更新中...)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是ARM Cortex-M学习资源. 类别 资源 版本 短评 官方汇总 cortex-m-resources / ARM公司专家Josep ...

  2. 痞子衡嵌入式：ARM Cortex-M文件那些事（5）- 映射文件(.map)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家讲的是嵌入式开发里的map文件. 第四节课里,痞子衡给大家介绍了第一种output文件-relocatable文件,本文继续给大家讲projec ...

  3. Spring中用了哪些设计模式

    1 简单工厂模式 又叫做静态工厂方法(StaticFactory Method)模式,但不属于23种GOF设计模式之一. 简单工厂模式的实质是由一个工厂类根据传入的参数,动态决定应该创建哪一个产品类. ...

  4. 易被忽略的Python内置类型

    Python中的内置类型是我们开发中最常见的,很多人都能熟练的使用它们. 然而有一些内置类型确实不那么常见的,或者说往往会被我们忽略,所以这次的主题就是带领大家重新认识这些"不同寻常&quo ...

  5. Mac终端工具item2实现覆盖在屏幕上透明效果

    1.去官网安装item2: https://www.iterm2.com/downloads.html 2.打开preferences 3.到keys配置: 4.点击上图展示的Create a Ded ...

  6. [Linux] 取两个文件的并集/交集/差集

    uniq -d是只打印重复行 -u是只打印独一无二的行文件A : abcd文件B: cdef取并集:A + B sort A B|uniq 取交集: sort A B|uniq -d 取差集:A - ...

  7. Spring Boot admin 2.0 详解

    一.什么是Spring Boot Admin ? Spring Boot Admin是一个开源社区项目,用于管理和监控SpringBoot应用程序. 应用程序作为Spring Boot Admin C ...

  8. 搞懂 JavaScript 继承原理

    在理解继承之前,需要知道 js 的三个东西: 什么是 JS 原型链 this 的值到底是什么 JS 的 new 到底是干什么的 1. 什么是 JS 原型链? 我们知道 JS 有对象,比如 var ob ...

  9. Bootstrap中内联单选按钮

    <div class="form-group"> <label class="control-label">性别:</label& ...

  10. [20190415]11g下那些latch是共享的.txt

    [20190415]11g下那些latch是共享的.txt http://andreynikolaev.wordpress.com/2010/11/23/shared-latches-by-oracl ...