精华内容
下载资源
问答
  • 今天小编就为大家分享一篇layui时间控件选择时间范围的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • LayUI时间格式化

    2021-03-02 15:49:16
    [LayUI] LayUI时间格式化 [LayUI] LayUI时间格式化 最近项目使用LayUI,记录一下遇到的问题,加深一下印象! 数据库中的日期字段使用的是date类型,查询返回的数据是时间戳 所以在前端显示的时候需要格式化,第一...

    [LayUI] LayUI时间格式化

    [LayUI] LayUI时间格式化

    最近项目使用LayUI,记录一下遇到的问题,加深一下印象!
    数据库中的日期字段使用的是date类型,查询返回的数据是时间戳
    在这里插入图片描述

    所以在前端显示的时候需要格式化,第一时间想到的是用TeamLeaf的时间格式化,thymeleaf文档内容:在这里插入图片描述

    th:value="${#dates.format(date,'yyyy-MM-dd')}
    

    但还是 LayUI的好用!

    layui.util.toDateString(mData.date, 'yyyy-MM-dd')
    

    mData.date为需要转化的内容。

    在table表格中的应用:

    {field: 'date', title: '制单日期', sort: true,minWidth:130, align: "center",templet: "<div>{{layui.util.toDateString(d.date, 'yyyy-MM-dd')}}</div>"}
    

    如果需要在form表单中回显时间数据,在回显之前进行格式化:

     mData.date= layui.util.toDateString(mData.date, 'yyyy-MM-dd')
     form.val('dataForm', mData);  // 回显数据
    
    展开全文
  • layui时间范围

    2018-08-10 16:10:28
    layui时间范围 layui时间区间搜索功能 如何锁定 开始时间 结束时间 的可选范围 &lt;div class="layui-form-inline"&gt; &lt;label class="layui-form-label"&gt;活动时间&...

    layui时间范围

    layui时间区间搜索功能 如何锁定 开始时间 结束时间 的可选范围
    <div class="layui-form-inline">
            <label class="layui-form-label">活动时间</label>
            <div class="layui-input-inline">
                <input type="text" id="start_time" name="start_time" autocomplete="off" placeholder="请输入开始时间" class="layui-input">
            </div> 至
            <div class="layui-input-inline">
                <input type="text" id="end_time" name="start_time" autocomplete="off" placeholder="请输入结束时间" class="layui-input">
            </div>
    </div>
    
    
    2.当设置了start_time以后,end_time肯定要大于start_time,否则要设置为不可选,
    
    当设置了end_time以后,start_time肯定要小于start_time,否则要设置为不可选
    <script>
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            var endDate= laydate.render({
                elem: '#end_time',//选择器结束时间
                type: 'datetime',
                min:"1970-1-1",//设置min默认最小值
                done: function(value,date){
                    startDate.config.max={
                        year:date.year,
                        month:date.month-1,//关键
                        date: date.date,
                        hours: 0,
                        minutes: 0,
                        seconds : 0
                    }
                }
            });
            //日期范围
            var startDate=laydate.render({
                elem: '#start_time',
                type: 'datetime',
                max:"2099-12-31",//设置一个默认最大值
                done: function(value, date){
                    endDate.config.min ={
                        year:date.year,
                        month:date.month-1, //关键
                        date: date.date,
                        hours: 0,
                        minutes: 0,
                        seconds : 0
                    };
                }
            });
    
        });
    </script>

     

    展开全文
  • layui时间控件选择时间范围

    万次阅读 2017-11-20 12:55:24
    解决layui时间控件清空之后无法正常使用的问题,以及时间范围的选择 共有两种解决方式: 方式一(layui 1.x): html代码: div class="layui-inline"> div class="layui-input-inline"> input type=...

    解决layui时间控件清空之后无法正常使用的问题,以及时间范围的选择

    共有两种解决方式:

    方式一(layui 1.x):

    html代码:
    <div class="layui-inline">
       <div class="layui-input-inline">
               <input type="text" name="start_time" class="layui-input" id="start_time" 
                      placeholder="开始时间(修改时间)">
         </div>
     </div>
     <div class="layui-inline">
         <div class="layui-input-inline">
             <input type="text" name="end_time" class="layui-input" id="end_time" 
                     placeholder="结束时间(修改时间)">
         </div>
     </div>
    js代码:
      var start = {
          istime: true,
          format: 'YYYY-MM-DD hh:mm:ss',
          max: '2099-06-16 23:59:59',
          istoday: true,
          choose: function (datas) {
              end.min = datas; //开始日选好后,重置结束日的最小日期
          }
      };
    
      var end = {
          istime: true,
          format: 'YYYY-MM-DD hh:mm:ss',
          max: '2099-06-16 23:59:59',
          istoday: true,
          choose: function (datas) {
              start.max = datas; //结束日选好后,重置开始日的最大日期
          }
      };
    
      document.getElementById('start_time').onclick = function () {
          start.elem = this;
          laydate(start);
      };
      document.getElementById('end_time').onclick = function () {
          end.elem = this;
          laydate(end);
      };

    方式二(layui 2.x):

    html代码
    <div class="layui-inline">
            <div class="layui-input-inline">
                  <input type="text" name="start_time" class="layui-input" id="start_time" 
                         placeholder="开始时间(修改时间)">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="text" name="end_time" class="layui-input" id="end_time" 
                        placeholder="结束时间(修改时间)">
            </div>
        </div>
    js代码
    layui.use([ 'laydate'], function(){
        var $ = layui.$;
        var laydate = layui.laydate;
        var nowTime = new Date().valueOf();
        var max = null;
    
           var start = laydate.render({
            elem: '#start_time',
            type: 'datetime',
            max: nowTime,
            btns: ['clear', 'confirm'],
            done: function(value, date){
                endMax = end.config.max;
                end.config.min = date;
                end.config.min.month = date.month -1;
            }
        });
        var end = laydate.render({
            elem: '#end_time',
            type: 'datetime',
            max: nowTime,
            done: function(value, date){
                if($.trim(value) == ''){
                    var curDate = new Date();
                    date = {'date': curDate.getDate(), 'month': curDate.getMonth()+1, 'year': curDate.getFullYear()};
                }
                start.config.max = date;
                start.config.max.month = date.month -1;
            }
        });
    展开全文
  • 今天小编就为大家分享一篇关于layui时间回显问题的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • LayUI时间线优化

    千次阅读 2019-11-05 22:56:29
    layui时间线官方文档:https://www.layui.com/doc/element/timeline.html layui原本时间线样式 代码部分,首先需要引入layui的样式文件 <div style="margin: 20px 50px;"> <ul class="layui-...

    layui时间线官方文档:https://www.layui.com/doc/element/timeline.html

    layui原本时间线样式

    代码部分,首先需要引入layui的样式文件

    <div style="margin: 20px 50px;">
    	<ul class="layui-timeline">
    		<!--定义时间线组件-->
    		<li class="layui-timeline-item">
    			<!--圆点,符号-->
    			<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    			<!--线-->
    			<div class="layui-timeline-content layui-text">
    				<!--头部-->
    				<h3 class="layui-timeline-title">8月18日</h3>
    				<!--内容部分-->
    				<p>
    					layui 2.0 的一切准备工作似乎都已到位。发布之弦,一触即发。
    					<br>不枉近百个日日夜夜与之为伴。因小而大,因弱而强。
    					<br>无论它能走多远,抑或如何支撑?至少我曾倾注全心,无怨无悔 <i class="layui-icon"></i>
    				</p>
    			</div>
    		</li>
    		<li class="layui-timeline-item">
    			<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    			<div class="layui-timeline-content layui-text">
    				<h3 class="layui-timeline-title">8月16日</h3>
    				<p>杜甫的思想核心是儒家的仁政思想,他有“<em>致君尧舜上,再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有:</p>
    				<ul>
    					<li>《登高》</li>
    					<li>《茅屋为秋风所破歌》</li>
    				</ul>
    			</div>
    		</li>
    		<li class="layui-timeline-item">
    			<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    			<div class="layui-timeline-content layui-text">
    				<h3 class="layui-timeline-title">8月15日</h3>
    				<p>
    					中国人民抗日战争胜利72周年
    					<br>常常在想,尽管对这个国家有这样那样的抱怨,但我们的确生在了最好的时代
    					<br>铭记、感恩
    					<br>所有为中华民族浴血奋战的英雄将士
    					<br>永垂不朽
    				</p>
    			</div>
    		</li>
    		<li class="layui-timeline-item">
    			<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    			<div class="layui-timeline-content layui-text">
    				<div class="layui-timeline-title">过去</div>
    			</div>
    		</li>
    	</ul>
    </div>    

    进行优化后的效果

    页面进行了一下修改,加了一点图标和动画效果。

    图标用的是font-awesome.css图标库,font-awesome图标库:http://fontawesome.dashgame.com/

    动画效果是用的animate.css,网址:https://daneden.github.io/animate.css/

    自己写的css样式代码:

    .clear {
    	clear: both
    }
    
    .timeline-box {
    	background: #fff;
    	padding: 20px 8px;
    	position: relative;
    	opacity: 0.7;
    }
    
    .timeline-main {
    	position: relative;
    }
    
    .timeline-main>h1 {
    	font-size: 18px;
    	background: #fff;
    	z-index: 1;
    	position: relative;
    	color: #484348;
    	margin-left: 33%;
    	margin-left: -moz-calc(35% - 7px);
    	margin-left: -webkit-calc(35% - 7px);
    	margin-left: calc(35% - 7px)
    }
    
    .timeline-main>h1>i {
    	padding-right: 10px;
    	font-size: 20px
    }
    
    .timeline-main>h1>span {
    	display: none
    }
    
    .timeline-main h2,
    .timeline-main h3 {
    	width: 31%;
    	text-align: right
    }
    
    .timeline-main h2,
    .timeline-main h2>a {
    	font-size: 16px;
    	margin: 5px 0;
    	color: #6bc30d
    }
    
    .timeline-main h3,
    .timeline-main h3>a {
    	font-size: 14px;
    	margin: 2px 0;
    	color: #ff5722
    }
    
    .timeline-month>ul>li {
    	padding: 10px 0
    }
    
    .timeline-month>ul>li .h4 {
    	display: inline-block;
    	width: 31%;
    	text-align: right;
    	float: left
    }
    
    .date {
    	display: inline-block;
    	padding: 2px 5px;
    	color: #484348;
    	font-size: 15px;
    	margin-top: 5px
    }
    
    .dot-circle {
    	color: #484348;
    	width: 8%;
    	text-align: center;
    	font-size: 22px;
    	z-index: 1;
    	position: relative;
    	background: #fff;
    	float: left
    }
    
    .content {
    	max-width: 50%;
    	float: left;
    	padding: 20px;
    	margin-left: 10px;
    	position: relative;
    	z-index: 1;
    	background: #484348;
    	color: #fff
    }
    
    .content img {
    	width: 100%
    }
    
    .content::before {
    	position: absolute;
    	left: -20px;
    	top: 6px;
    	height: 0;
    	width: 0;
    	content: '';
    	border: 10px solid rgba(255, 255, 255, 0);
    	border-top: 6px solid rgba(255, 255, 255, 0);
    	border-bottom: 6px solid rgba(255, 255, 255, 0);
    	border-right-color: #484348
    }
    
    .timeline-line {
    	position: absolute;
    	left: 35%;
    	top: 0;
    	height: 100%;
    	width: 2px;
    	background: #484348;
    	z-index: 0
    }
    
    .timeline-year {
    	margin: 10px 0
    }
    
    @media(min-width:768px) {
    	.timeline-box {
    		background: #fff;
    		padding: 40px 15px;
    		position: relative;
    	}
    	.timeline-main>h1 {
    		font-size: 26px;
    		margin-left: 16%;
    		margin-left: -moz-calc(18% - 13px);
    		margin-left: -webkit-calc(18% - 13px);
    		margin-left: calc(18% - 13px)
    	}
    	.timeline-main>h1>i {
    		font-size: 30px
    	}
    	.timeline-main>h1>span {
    		display: inline
    	}
    	.timeline-main h2,
    	.timeline-main h3 {
    		width: 16%
    	}
    	.timeline-main h2,
    	.timeline-main h2>a {
    		font-size: 24px
    	}
    	.timeline-main h3,
    	.timeline-main h3>a {
    		font-size: 20px
    	}
    	.timeline-month>ul>li .h4 {
    		width: 16%
    	}
    	.dot-circle {
    		width: 4%;
    		font-size: 22px
    	}
    	.content {
    		max-width: 70%
    	}
    	.timeline-line {
    		left: 18%
    	}
    }
    
    @media(min-width:992px) {
    	.timeline-main>h1 {
    		font-size: 34px;
    		background: #fff;
    		z-index: 1;
    		position: relative;
    		color: #484348;
    		margin-left: 17%;
    		margin-left: -moz-calc(18% - 16px);
    		margin-left: -webkit-calc(18% - 16px);
    		margin-left: calc(18% - 16px)
    	}
    	.timeline-main>h1>i {
    		font-size: 36px
    	}
    	.timeline-main h2,
    	.timeline-main h2>a {
    		font-size: 30px
    	}
    	.timeline-main h3,
    	.timeline-main h3>a {
    		font-size: 24px
    	}
    }

    HTML部分代码

    <div class="timeline-box shadow">
    	<div class="timeline-main">
    		<h1><i class="fa fa-clock-o"></i>一念之间</h1>
    		<div class="timeline-line"></div>
    		<div class="timeline-year">
    			<h2><a class="yearToggle">2019 年</a><i class="fa fa-caret-down fa-fw"></i></h2>
    			<div class="timeline-month">
    				<ul>
    					<li>
    						<div class="h4 animated fadeInLeft">
    							<p class="date">10月24日</p>
    						</div>
    						<p class="dot-circle animated "><i class="fa fa-dot-circle-o"></i></p>
    						<div class="content animated fadeInRight">
    							layui 2.0 的一切准备工作似乎都已到位。发布之弦,一触即发。
    							<br>不枉近百个日日夜夜与之为伴。因小而大,因弱而强。
    							<br>无论它能走多远,抑或如何支撑?至少我曾倾注全心,无怨无悔 <i class="layui-icon"></i></div>
    						<div class="clear"></div>
    					</li>
    					<li>
    						<div class="h4 animated fadeInLeft">
    							<p class="date">09月06日</p>
    						</div>
    						<p class="dot-circle animated "><i class="fa fa-dot-circle-o"></i></p>
    						<div class="content animated fadeInRight">
    							<p>杜甫的思想核心是儒家的仁政思想,他有“<em>致君尧舜上,再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有:</p>
    							<ul>
    								<li>《登高》</li>
    								<li>《茅屋为秋风所破歌》</li>
    							</ul>
    						</div>
    						<div class="clear"></div>
    					</li>
    					<li>
    						<div class="h4 animated fadeInLeft">
    							<p class="date">08月26日</p>
    						</div>
    						<p class="dot-circle animated "><i class="fa fa-dot-circle-o"></i></p>
    						<div class="content animated fadeInRight">
    							中国人民抗日战争胜利72周年
    							<br>常常在想,尽管对这个国家有这样那样的抱怨,但我们的确生在了最好的时代
    							<br>铭记、感恩
    							<br>所有为中华民族浴血奋战的英雄将士
    							<br>永垂不朽
    						</div>
    						<div class="clear"></div>
    					</li>
    				</ul>
    			</div>
    		</div>
    		<div class="timeline-year">
    			<h2><a class="yearToggle">2018 年</a><i class="fa fa-caret-down fa-fw"></i></h2>
    			<div class="timeline-month">
    				<ul>
    					<li>
    						<div class="h4 animated fadeInLeft">
    							<p class="date">10月24日</p>
    						</div>
    						<p class="dot-circle animated "><i class="fa fa-dot-circle-o"></i></p>
    						<div class="content animated fadeInRight">
    							layui 2.0 的一切准备工作似乎都已到位。发布之弦,一触即发。
    							<br>不枉近百个日日夜夜与之为伴。因小而大,因弱而强。
    							<br>无论它能走多远,抑或如何支撑?至少我曾倾注全心,无怨无悔 <i class="layui-icon"></i></div>
    						<div class="clear"></div>
    					</li>
    					<li>
    						<div class="h4 animated fadeInLeft">
    							<p class="date">09月06日</p>
    						</div>
    						<p class="dot-circle animated "><i class="fa fa-dot-circle-o"></i></p>
    						<div class="content animated fadeInRight">
    							<p>杜甫的思想核心是儒家的仁政思想,他有“<em>致君尧舜上,再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有:</p>
    							<ul>
    								<li>《登高》</li>
    								<li>《茅屋为秋风所破歌》</li>
    							</ul>
    						</div>
    						<div class="clear"></div>
    					</li>
    					<li>
    						<div class="h4 animated fadeInLeft">
    							<p class="date">08月26日</p>
    						</div>
    						<p class="dot-circle animated "><i class="fa fa-dot-circle-o"></i></p>
    						<div class="content animated fadeInRight">
    							中国人民抗日战争胜利72周年
    							<br>常常在想,尽管对这个国家有这样那样的抱怨,但我们的确生在了最好的时代
    							<br>铭记、感恩
    							<br>所有为中华民族浴血奋战的英雄将士
    							<br>永垂不朽
    						</div>
    						<div class="clear"></div>
    					</li>
    				</ul>
    			</div>
    		</div>
    
    		<h1 style="padding-top:4px;padding-bottom:2px;margin-top:40px;"><i class="fa fa-hourglass-end"></i>THE END</h1>
    	</div>
    </div>

     

    展开全文
  • layui时间选择器

    2020-10-26 19:39:11
    layui时间选择器闪退,消失的问题 trigger: ‘click’
  • layui时间框赋值

    千次阅读 2020-11-06 14:41:54
    layui时间框赋值 经常在一些表单验证中,选中时间后此时间并不满足需求,需后台直接赋予时间框一个数值,但是使用jquery直接赋值不起效,大家可以试下以下方式,通过模拟点击时间控件的方式才获取时间数据。大家使用...
  • ## 问题描述 问题描述,在使用layui的laydate组件的时候,会用到时间日期选择...[layui时间日期选择](https://img-blog.csdnimg.cn/20210319111347622.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,..
  • layui时间控件闪退

    2021-05-30 17:28:50
    layui时间控件闪退 //日期时间选择器 laydate.render({ elem: '#test1' ,type: 'datetime' ,trigger: 'click' }); //日期时间选择器 laydate.render({ elem: '#test4' ,type: 'datetime' ,trigger: 'click' })...
  • Layui时间格式化

    千次阅读 2019-06-30 23:53:34
    Layui超实用10篇技术解决方案:... ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 一、Layui时间格式化 方法:layui.util.toDateString(date,‘yyyy-MM-dd HH:mm:ss’) , {field: '...
  • layui 时间时间选择器最多选择30天

    千次阅读 热门讨论 2019-04-04 14:57:14
    layui 时间选择器最多选择30天https://www.layui.com/doc/modules/laydate.html html <label>时间选择:</label> <div class="layui-inline" id="start_div"> <input type="text" name=...
  • layui时间线

    2021-08-11 08:31:08
    时间线 常规时间线 相关样式 layui-timeline  代表一个时间线          |-- layui-timeline-item  代表一个时间节点      ...
  • Layui 时间控件 闪退问题解决 问题描述: 在使用layui的的时间组件laydate的过程中,点击输入框,时间弹出框会一闪而过,然后就消失了,神奇的是 当我alt+tab的时候,他又显示了 就是这么神奇。 解决思路: 首先,...
  • layui时间组件一闪而过问题
  • 关于layui时间选择器 一点就消失的问题解决处理方法 处理方法 加上 $(this).removeAttr(“lay-key”);和,trigger : ‘click’,问题就解决了。 layui.use('laydate',function () { var laydate=layui.laydate; $...
  • Layui时间日期的使用

    2019-12-02 16:51:33
    Layui时间日期的使用1.页面2.js3.实例展示 1.页面 首先引入layui的css和js文件: <link rel="stylesheet" href="${pageContext.request.contextPath}/css/span.css"> <link rel="stylesheet" href="${...
  • 解决layui时间控件由于屏幕比例不同导致无法显示的问题解决方式 这是原先的代码,此写法在页面大小不足时会发生时间控件无法显示(闪烁消失)的问题 laydate.render({ elem: '#startTime', //目标元素。由于...
  • layui 时间控件(laydate) 闪退问题 问题描述: 在layui项目中,使用了时间控件,在火狐浏览器能正常弹出时间选择控件,但是切换成谷歌浏览器后,发现,时间选择控件一闪而过,或时好时坏 问题原因: laydate的...
  • layui时间选择器选择周和季度

    千次阅读 2020-08-12 17:41:31
    layui时间选择器选择周和季度 最近一个后台管理页面数据查询时间间隔要有:日,周,月,季度,年;UI组件我们用的layui,官方dome只有日月年(直接去ctrl+c ctrl+v就好了,在这就不多说了);So我们要自定义周和...
  • layui 时间限制

    2020-03-04 16:14:25
    开始时间小于结束时间,并且只有5天跨度可以选择 layui.use(‘laydate’, function(){ var laydate = layui.laydate; //执行一个laydate实例 var start = laydate.render({ elem: '#startTime', ...
  • layui时间选择器相关问题 ①时间选择器闪退,消失的问题 ②layDate 输入框内添加的小图标可点击(无) 时间选择器闪退,消失的问题 1,去掉lay-key 2,加入 trigger: ‘click’ eg. laydate.render({ elem: ‘#...
  • layui时间选择器的使用,可以查看官网详细介绍: https://www.layui.com/doc/modules/laydate.html 问题描述: 点击时间框的时候出现时间下拉框,然后闪退,不能选择。 解决方法: 加入这行代码: trigger...
  • layui时间选择器---去除秒列

    千次阅读 2019-07-04 10:54:39
    layui时间选择器—去除秒列 前言:layui开发文档中介绍的时间选择器包含了时,分,秒的选择,在实际开发过程中,我们选择时间可能不需要精确到秒。 原始结构: 1、HTML页面引入layui.js文件 2、HTML文件中添加如下...
  • 今天我要讲的知识点是在input标签绑定当前时间和layui时间的使用,可能有的人并不懂这是什么意思,没事,接下来我会给你们慢慢的讲解。我们首先打开开发工具VS,我不知道你们有没有安装Visual Studio 2015,我的版本...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,925
精华内容 4,370
关键字:

layui时间