精华内容
下载资源
问答
  • laydate

    2019-09-24 07:23:31
    layui.use('laydate', function() { var laydate = layui.laydate; //执行一个laydate实例 laydate.render({ elem: '#start' //指定元素 , ...
    layui.use('laydate', function() {
            var laydate = layui.laydate;
            
            //执行一个laydate实例
            laydate.render({
                elem: '#start' //指定元素
                    ,
                type: 'datetime',
                theme: 'yellow'
            });
    
            laydate.render({
                elem: '#end' //指定元素
            });    
        });

    这里和layer不同的是要指定一个实例也就是一个dom元素

    如果想自定义css属性 需要在csszhong 配置一个 theme(主题)

    如下

    <style type="text/css">
                /*可以自定义时间选择器颜色*/
                
                .laydate-theme-yellow {
                    background-color: yellow;
                    color: red;
                    /*color: #007DDB;*/
                }
                /*该选中时间的背景色*/
                
                .laydate-theme-yellow .layui-this {
                    background-color: red !important;
                }
            </style>

    注意:找到对应的css名自行修改,如果不起作用就用!important关键字覆盖默认的颜色

    转载于:https://www.cnblogs.com/lxzwhite/p/10634805.html

    展开全文
  • layDate

    2019-09-26 17:20:58
    官网:http://www.layui.com/laydate/index.html    1、日期选择范围限制(代码示例...li class="laydate-icon" id="start" style="width:200px; margin-right:10px;"></li> 2 结束日:<li class...

      官网:http://www.layui.com/laydate/index.html  

      1、日期选择范围限制(代码示例如下)  

     1 开始日:<li class="laydate-icon" id="start" style="width:200px; margin-right:10px;"></li>
     2 结束日:<li class="laydate-icon" id="end" style="width:200px;"></li>
     3 <script>
     4 var start = {
     5   elem: '#start',
     6   format: 'YYYY/MM/DD hh:mm:ss',
     7   min: laydate.now(), //设定最小日期为当前日期
     8   max: '2099-06-16 23:59:59', //最大日期
     9   istime: true,
    10   istoday: false,
    11   choose: function(datas){
    12      end.min = datas; //开始日选好后,重置结束日的最小日期
    13      end.start = datas //将结束日的初始值设定为开始日
    14   }
    15 };

     

      2、日期范围限定在昨天到明天(代码示例如下)  

    <div id="hello3" class="laydate-icon"></div>
    <script>
    laydate({
      elem: '#hello3',
      min: laydate.now(-1), //-1代表昨天,-2代表前天,以此类推
      max: laydate.now(+1) //+1代表明天,+2代表后天,以此类推
    });
    </script>

     

    转载于:https://www.cnblogs.com/ruankai/p/6861187.html

    展开全文
  • layui-laydate时间日历控件详细示例

    万次阅读 多人点赞 2018-05-23 17:18:53
    此控件可使用layui或者独立版的layDate,两者初始化有些不同 在 layui 模块中使用layui.code <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>la...

    layui下载地址:http://www.layui.com/

    此控件可使用layui或者独立版的layDate,两者初始化有些不同

     

    
     

    在 layui 模块中使用layui.code

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>layDate快速使用</title>
    6. <link rel="stylesheet" href="/static/build/layui.css" media="all">
    7. </head>
    8. <body>
    9.  
    10. <div class="layui-inline"> <!-- 注意:这一层元素并不是必须的 -->
    11. <input type="text" class="layui-input" id="test1">
    12. </div>
    13.  
    14. <script src="/static/build/layui.js"></script>
    15. <script>
    16. layui.use('laydate', function(){
    17. var laydate = layui.laydate;
    18.  
    19. //执行一个laydate实例
    20. laydate.render({
    21. elem: '#test1' //指定元素
    22. });
    23. });
    24. </script>
    25. </body>
    26. </html>
    27.  
    
     

    作为独立组件使用layui.code

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>使用 layDate 独立版</title>
    6. </head>
    7. <body>
    8.  
    9. <input type="text" id="test1">
    10.  
    11. <script src="laydate.js"></script>
    12. <script>
    13. //执行一个laydate实例
    14. laydate.render({
    15. elem: '#test1' //指定元素
    16. });
    17. </script>
    18. </body>
    19. </html>

     

    详细配置和事件触发,注释写的很清楚了

    laydate.render({ 
      elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等(类型:String/DOM,默认值:无必填项,用于绑定执行日期渲染的元素,值一般为选择器,或DOM对象)
      ,type: 'year'//year-只提供年列表选择||month-只提供年、月选择||date-可选择:年、月、日。type默认值,一般可不填||time-只提供时、分、秒选择||datetime-可选择:年、月、日、时、分、秒
      ,range: true //或 range: '~' 来自定义分割字符
      ,format: 'yyyy年MM月dd日' //可任意组合 yyyy年MM月dd日 HH时mm分ss秒===2017年08月18日 20时08分08秒,'yyyy/mm/dd'
      ,value: '2018-08-18' //必须遵循format参数设定的格式String,默认值:new Date()
      ,min: '2017-1-1'//min/max - 最小/大范围内的日期时间值 类型:string,默认值:min: '1900-1-1'、max: '2099-12-31'
      ,max: '2017-12-31'
      ,trigger: 'click' // 自定义弹出控件的事件(类型:String,默认值:focus,如果绑定的元素非输入框,则默认事件为:click)-采用click弹出
      ,show: true //默认显示-类型:Boolean,默认值:false;;;;如果设置: true,则控件默认显示在绑定元素的区域。通常用于外部事件调用控件
      ,position: 'static'//类型:String,默认值:absolute  (fixed,absolute,static)
      ,zIndex: 99999999//层叠顺序-类型:Number,默认值:66666666一般用于解决与其它元素的互相被遮掩的问题。如果 position 参数设为 static 时,该参数无效
      ,showBottom: false//是否显示底部栏--类型:Boolean,默认值:true如果设置 false,将不会显示控件的底部栏区域
      ,btns: ['clear', 'now', 'confirm']//类型:Array,默认值:['clear', 'now', 'confirm'](显示清空,今天,确认)
      ,lang: 'en'//语言类型:String,默认值:cn--内置了两种语言版本:cn(中文版)、en(国际版,即英文版)
      ,theme: 'grid'//主题-类型:String,默认值:default,theme的可选值有:default(默认简约)、molv(墨绿背景)、#颜色值(自定义颜色背景)、grid(格子主题)
      ,calendar: true//是否显示公历节日--类型:Boolean,默认值:false
      ,mark: {//标注重要日子--类型:Object,默认值:无
        '0-10-14': '生日'
        ,'0-12-31': '跨年' //每年12月31日
        ,'0-0-10': '工资' //每个月10号
        ,'2017-8-15': '' //具体日期
        ,'2017-8-20': '预发' //如果为空字符,则默认显示数字+徽章
        ,'2017-8-21': '发布'
      }
      ,ready: function(date){//控件在打开时触发,回调返回一个参数
        console.log(date); //得到初始的日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
      }
      ,change: function(value, date, endDate){//日期时间被切换后的回调
        console.log(value); //得到日期生成的值,如:2017-08-18
        console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
        console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。
      }
      ,done: function(value, date, endDate){//控件选择完毕后的回调---点击日期、清空、现在、确定均会触发。
        console.log(value); //得到日期生成的值,如:2017-08-18
        console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
        console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。
      }
    });

    ---------------------------------------------分割线---------------------------------------------------------

    ps:评论有人问range问题,是这样用的:

    layui.use('laydate', function(){
    				var laydate = layui.laydate;
    			//执行一个laydate实例
    				laydate.render({
    					elem: '#test1', //指定元素
    					range:'~',
    					value: '2019-04-16 ~ 2019-04-19'
    				});
    			});

    设置默认值时value 的值不是用数组,是要用跟input中展示的格式一样,这样点击input会自动显示默认区间范围

    range也可以写成 range:true ,这样分隔符默认为 ‘-’ ,也就是2019-04-16 - 2019-04-19

     

    展开全文
  • laydate5.0

    2018-07-02 11:25:18
    laydate5.0新版本下载,有需要的可以看看分享一下,很实用
  • layDate日期控件

    2018-05-11 15:26:30
    layDate日期控件layDate日期控件layDate日期控件layDate日期控件
  • laydate.css

    2021-03-26 16:46:11
    找不到laydate.css报错问题
  • laydate.js

    2020-09-23 10:20:54
    laydate.js,多种时间样式可选
  • laydate.js是属于Javascript系列的一款日期控件与时间插件,laydate.js支持兼容IE6在内的主流浏览器。laydate.js经过贤心大大的重写之后功能越来越强大,用起来也愈渐灵活了,但是在一个基于angular+ocLazyLoad的项目...
  • laydate.rar

    2020-05-18 00:49:33
    laydate日历控件需要的资源,里面包括了css,比用的js,这个控件是laydate日历控件,是一个时间段的日历控件,当你选择开始时间后,再选择结束时间,那结束时间必须大于开始时间,同时开始时间也必须小于结束时间
  • laydate控件

    2019-10-17 15:50:15
    1.问题:laydate控件 弹出框 不随鼠标滚轮移动问题 解决办法: 在laydate时间控件所在的页面头部添加一个样式 body{ height:auto; } 问题2:父页面太小,导致laydate闪退 解决办法: 在laydate.render中加 ...

    1.问题:laydate控件  弹出框 不随鼠标滚轮移动问题

    解决办法:

    在laydate时间控件所在的页面头部添加一个样式

    body{

    height:auto;

    }

    问题2:父页面太小,导致laydate闪退

    解决办法:

    在laydate.render中加

    trigger: 'click',

    就可以避免闪退了

     

     

    展开全文
  • laydate.zip

    2020-08-17 10:27:39
    在原本的laydate控件上添加了一个季度选择功能,满足了填报期所需要的年,季度,月,从而更方便开发者的使用。
  • laydate插件

    2021-04-01 17:01:58
    laydate 插件 预期效果 结束时间不能小于开始时间 <script> var startDate = laydate.render({ elem: id1, format: 'yyyy-MM-dd' , done: function (value, date) { endDate.config.min = { ...
  • layDate组件

    2019-09-29 15:17:27
    复制layDate文件夹到目录中,引入layDate文件中的laydate.js 详细项目组成: 项目源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &...
  • laydate.js是属于Javascript系列的一款日期控件与时间插件,laydate.js支持兼容IE6在内的主流浏览器。laydate.js经过贤心大大的重写之后功能越来越强大,用起来也愈渐灵活了,但是在一个基于angular+ocLazyLoad的项目...
  • laydate日期

    2020-07-14 22:09:02
    12306的框框 官网: https://www.layui.com/laydate/
  • laydate使用

    2019-03-19 11:45:46
    laydate使用 //选择时分秒 $(".laydate-time").each(function(){ var _this = this; laydate.render({ elem: this, format: 'HH:mm', //过滤只显示时分 type: 'time', //...
  • layDate 时间控件

    2018-01-24 16:54:36
    可以搜索laydate下载官网最新插件,没什么说的了 aaaaa
  • laydate皮肤拓展

    2019-04-30 15:16:25
    本资源为laydate拓展,新增皮肤插件可视化修改,位于时间选择模块的最下方!!! 【提示:由于上传时疏忽大意,未上传jquery.min.js文件,下载的小伙伴只需将页面的jquery路径改成自己的即可】
  • laydate组件

    2018-07-03 20:58:17
    layui.laydate 时间日期组件:点击打开链接主要以:年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器 五种类型的选择方式为基本核心,并且均支持范围选择(即双控件)。内置强劲的自定义日期格式解析...
  • laydate日历插件

    2017-09-30 16:52:36
    一款JS日历控件特效代码layDate,直接引用到需要的代码中即可
  • springBoot引入laydate

    千次阅读 2021-05-05 19:26:35
    springBoot引入laydate 进入官网路径,下载laydate,并解压缩 官网路径:https://www.layui.com/laydate/ 解压缩完毕后,然后把文件夹放在resource先的staitc路径下(注意,static文件夹是手动创建的,不是springboot项目...
  • 时间控件laydate

    2016-11-23 17:09:02
    js时间控件laydate,主题色为雅兰。
  • laydate日期控件

    2018-12-21 17:16:42
    她基于原生JavaScript精心雕琢,兼容了包括IE6在内的所有主流浏览器...layDate本着资源共享的开发者精神和对网页日历交互无穷的追求,延续了layui一贯的简单与易用。她遵循LGPL协议,您可以免费将她用于任何个人项目。
  • laydate 使用

    2017-10-11 15:51:00
    官网 http://www.layui.com/doc/modules/laydate.html ... 版本 1.0.9 和 2.X 使用方式 引入laydate.js 或者layui.js 这里使用laydate.js 在页面引入相应的js 注意版本 在js 中 stati...
  • laydate闪退

    千次阅读 2019-05-29 09:23:50
    1,解决方案一:加 trigger: ‘click’...laydate.render({ elem: this ,format:‘yyyy-MM-dd HH:mm:ss’ ,type:‘datetime’ ,trigger: 'click’ }); 解决方案二: $("#"+dateControlId).removeAttr(“lay-key”); ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,789
精华内容 715
关键字:

laydate