热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

今天小编就为大家分享一篇layui时间控件选择时间范围的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

共有两种解决方式:

方式一(layui 1.x):

html代码:

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代码

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时间控件选择时间范围的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。


推荐阅读
  • Windows 7 64位系统下Redis的安装与PHP Redis扩展配置
    本文详细介绍了在Windows 7 64位操作系统中安装Redis以及配置PHP Redis扩展的方法,包括下载、安装和基本使用步骤。适合对Redis和PHP集成感兴趣的开发人员参考。 ... [详细]
  • 雨林木风 GHOST XP SP3 经典珍藏版 V2017.11
    雨林木风 GHOST XP SP3 经典珍藏版 V2017.11 ... [详细]
  • 本文详细介绍如何使用CSS自定义HTML5视频播放器的样式,涵盖常见属性及跨浏览器兼容性问题。发布时间:2020-09-14 14:46:29;来源:亿速云;阅读量:58;作者:小新。 ... [详细]
  • 本文详细介绍了如何在预装Ubuntu系统的笔记本电脑上安装Windows 7。针对没有光驱的情况,提供了通过USB安装的具体方法,并解决了分区、驱动器无法识别等问题。 ... [详细]
  • Appium + Java 自动化测试中处理页面空白区域点击问题
    在进行移动应用自动化测试时,有时会遇到某些页面没有返回按钮,只能通过点击空白区域返回的情况。本文将探讨如何在Appium + Java环境中有效解决此类问题,并提供详细的解决方案。 ... [详细]
  • 本文详细介绍了JSP的三大指令:page、include和taglib,重点探讨了静态包含与动态包含的区别及其应用场景,并解释了如何使用taglib指令引入第三方标签库。 ... [详细]
  • 如何清除Chrome浏览器地址栏的特定历史记录
    在使用Chrome浏览器时,你可能会发现地址栏保存了大量浏览记录。有时你可能希望删除某些特定的历史记录而不影响其他数据。本文将详细介绍如何单独删除地址栏中的特定记录以及批量清除所有历史记录的方法。 ... [详细]
  • 2018-2019学年第六周《Java数据结构与算法》学习总结
    本文总结了2018-2019学年第六周在《Java数据结构与算法》课程中的学习内容,重点介绍了非线性数据结构——树的相关知识及其应用。 ... [详细]
  • Coursera ML 机器学习
    2019独角兽企业重金招聘Python工程师标准线性回归算法计算过程CostFunction梯度下降算法多变量回归![选择特征](https:static.oschina.n ... [详细]
  • 利用Selenium与ChromeDriver实现豆瓣网页全屏截图
    本文介绍了一种使用Selenium和ChromeDriver结合Python代码,轻松实现对豆瓣网站进行完整页面截图的方法。该方法不仅简单易行,而且解决了新版Selenium不再支持PhantomJS的问题。 ... [详细]
  • Nginx 反向代理与负载均衡实验
    本实验旨在通过配置 Nginx 实现反向代理和负载均衡,确保从北京本地代理服务器访问上海的 Web 服务器时,能够依次显示红、黄、绿三种颜色页面以验证负载均衡效果。 ... [详细]
  • 本文深入探讨了SQL数据库中常见的面试问题,包括如何获取自增字段的当前值、防止SQL注入的方法、游标的作用与使用、索引的形式及其优缺点,以及事务和存储过程的概念。通过详细的解答和示例,帮助读者更好地理解和应对这些技术问题。 ... [详细]
  • 本题来自WC2014,题目编号为BZOJ3435、洛谷P3920和UOJ55。该问题描述了一棵不断生长的带权树及其节点上小精灵之间的友谊关系,要求实时计算每次新增节点后树上所有可能的朋友对数。 ... [详细]
  • Ulysses Mac v29:革新文本编辑与写作体验
    探索Ulysses Mac v29,这款先进的纯文本编辑器为Mac用户带来了全新的写作和编辑环境。它不仅具备简洁直观的界面,还融合了Markdown等标记语言的最佳特性,支持多种格式导出,并提供强大的组织和同步功能。 ... [详细]
  • 实用正则表达式有哪些
    小编给大家分享一下实用正则表达式有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下 ... [详细]
author-avatar
读书洗_心__灵_780
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有