layui时间控件选择时间范围的实现方法


Posted in Javascript onSeptember 28, 2019

解决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;
    }
});

根据开始时间 动态限制结束时间 知识点

type: 'datetime', 是带时分秒的 date 是不带时分秒的

layui.use('laydate', function(){
  /* lay('.layui-input').each(function(){
  laydate.render({
   elem: this
   ,trigger: 'click'
   ,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)才会返回。对象成员同上。
   }
  });
 }); */
 var $ = layui.$;
   var laydate = layui.laydate;
  var nowTime = new Date().valueOf();
   var max = null;
    var start = laydate.render({
     elem: '#start_time',
     type: 'datetime',
     btns: ['clear', 'confirm'],
     done: function(value, date){
       endMax = end.config.max;
       end.config.min = date;
       end.config.min.month = date.month -1;
     },
     change: function(value, date, endDate){
     var timestamp2 = Date.parse(new Date(value));
  timestamp2 = timestamp2 / 1000;
       end.config.min = timestamp2;
       end.config.min.month = date.month -1;
   }
   });
   var end = laydate.render({
     elem: '#end_time',
     type: 'date',
     done: function(value, date){
     console.log(" ====== "+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;
     }
   });
 });

通过以上代码,就已经可以实现动态改变开始时间最大值与结束时间最小值的改变了。

下面来说一下容易遇到的坑:

坑一 :laydate.render无法重复渲染,当laydate.render对应一个elem已经渲染过一次之后,我们是无法通过再次渲染来修改其中的max值与min值的。

坑二 :startDate.config.max与endDate.config.min是一个对象,不是一个字符串,在网上看到一个人不负责任的给了这么一句话,endDate.config.min="2017-01-01";说可以设置,我居然信了他的邪掉进坑里半天。实际这里得到的是一个对象,不同于在我们渲染时的min与max了,直接将字符串赋值必然没有效果。

坑三:dates的格式虽然与endDate.config.min格式相同但是直接让endDate.config.min=dates你会发现并不是你想要的结果,是因为虽然dates中的数据是你选择的日期,可是endDate.config.min中设置的month的值却比你输入的month的值大了一个月,因此假如你选的开始日期是11月13日,直接赋值给了endDate.config.min之后你会发现结束日期的最小日期变成了12月13日,因此我们需要将dates中的月份值减一后再赋值给endDate.config.min

以上这篇layui时间控件选择时间范围的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javaScript 删除字符串空格多种方法小结
Oct 24 Javascript
JQuery触发radio或checkbox的change事件
Dec 18 Javascript
javascript自定义startWith()和endWith()的两种方法
Nov 11 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 Javascript
Vue组件创建和传值的方法
Aug 17 Javascript
vue中使用protobuf的过程记录
Oct 26 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 Javascript
使用typescript改造koa开发框架的实现
Feb 04 Javascript
Postman环境变量全局变量使用方法详解
Aug 13 Javascript
JavaScript实现点击自制菜单效果
Feb 02 Javascript
vue 数据双向绑定的实现方法
Mar 04 Vue.js
layui table 表格上添加日期控件的两种方法
Sep 28 #Javascript
Layui选项卡制作历史浏览记录的方法
Sep 28 #Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 #Javascript
layui的select联动实现代码
Sep 28 #Javascript
关于layui的下拉搜索框异步加载数据的解决方法
Sep 28 #Javascript
layui的数据表格+springmvc实现搜索功能的例子
Sep 28 #Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 #Javascript
You might like
php结合飞信 免费天气预报短信
2009/05/07 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
ThinkPHP 模板substr的截取字符串函数详解
2017/01/09 PHP
ThinkPHP 在阿里云上的nginx.config配置实例详解
2017/10/11 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
2015/06/29 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
理解Javascript图片预加载
2016/02/23 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
2018/11/09 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
React中使用Vditor自定义图片详解
2020/12/25 Javascript
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
python标准算法实现数组全排列的方法
2015/03/17 Python
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
详解Python中的路径问题
2020/09/02 Python
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
德国孕妇装和婴童服装网上商店:bellybutton
2018/04/12 全球购物
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
澳大利亚玩具剧场:Toy Playhouse
2019/03/03 全球购物
工作决心书范文
2014/03/11 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
中学政教处工作总结
2015/08/13 职场文书
优质服务标语口号
2015/12/26 职场文书
《詹天佑》教学反思
2016/02/20 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库