<!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. 痞子衡嵌入式：飞思卡尔i.MX RT系列MCU启动那些事（9）- 从Parallel NOR启动

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是飞思卡尔i.MX RT系列MCU的Parallel NOR启动. 上一篇讲i.MXRT从Raw NAND启动的文章 从Raw NAND启 ...

  2. C#添加PDF页眉——添加文本、图片到页眉

    页眉常用于显示文档的附加信息,我们可以在页眉中插入文本或者图形,例如,页码.日期.公司徽标.文档标题.文件名或作者名等等.那么我们如何以编程的方式添加页眉呢?今天,这篇文章向大家分享如何使用了免费组件 ...

  3. 2018.12/17 function 的闭包

    1.闭包:函数在调用的时候会形成一个私有的作用域,对内部变量起到保护的作用,这就是闭包. 2.变量销毁: 1.人为销毁  var a=12; a=null 2.自然销毁  函数调用完成之后 浏览器会自 ...

  4. 页面内容不够高footer始终位于页面的最底部

    相信很多前端工程师在开发页面时会遇到这个情况:当整个页面高度不足以占满显示屏一屏,页脚不是在页面最底部,用户视觉上会有点不好看,想让页脚始终在页面最底部,我们可能会想到用: 1.min-height来 ...

  5. CANVAS画布与SVG的区别

    CANVAS是html5提供的新元素<canvas>,而svg存在的历史要比canvas久远,svg并不是html5专有的标签,最初svg是用xml技术(超文本扩展语言,可以自定义标签或属 ...

  6. HTML中特殊符号

  7. vue2.x 时间范围 date range timepicker。只在项目中使用elementUI的date-picker

    elementUI官方案例:http://element.eleme.io/#/zh-CN/component/date-picker (1)效果图: (2)安装和引入 npm i element-u ...

  8. Html和Css学习笔记-css进阶-盒模型

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...

  9. 【20190328】CSS-transform-origin（变形原点）解析

    因为搜遍网上也没有一篇文章把transform-origin讲得很清楚的,所以自己总结了一下 transform-origin是变形原点,也就是该元素围绕着那个点变形或旋转,该属性只有在设置了tran ...

  10. SAP MM MIGO & Return Delivery 组合实现部分数量的Reversal

    SAP MM MIGO & Return Delivery 组合实现部分数量的Reversal 在笔者看来,MIGO这个事务代码里的Return Delivery主要用于采购退货场景. 先找到 ...