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 设计模式之单体模式 面向对象学习基础
Apr 18 Javascript
javascript attachEvent绑定多个事件执行顺序问题
Oct 20 Javascript
juqery 学习之三 选择器 可见性 元素属性
Nov 25 Javascript
JS获取鼠标坐标的实例方法
Jul 18 Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 Javascript
跟我学习javascript的prototype原型和原型链
Nov 18 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
Node.js使用Express创建Web项目详细教程
Mar 31 Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
Nov 07 Javascript
关于angular 8.1使用过程中的一些记录
Nov 25 Javascript
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
提问的智慧
2006/10/09 PHP
php strcmp使用说明
2010/04/22 PHP
PHP 遍历文件实现代码
2011/05/04 PHP
解析PHP自带的进位制之间的转换函数
2013/06/08 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
PHP children()函数讲解
2019/02/03 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
JS面向对象编程之对象使用分析
2010/08/19 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
理解Javascript的call、apply
2015/12/16 Javascript
JavaScript利用Date实现简单的倒计时实例
2017/01/12 Javascript
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
Layui弹出层 加载 做编辑页面的方法
2019/09/16 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
2020/08/06 Javascript
[01:00:52]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第一场
2018/04/05 DOTA
Scrapy的简单使用教程
2017/10/24 Python
Python使用googletrans报错的解决方法
2018/09/25 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
python 同时读取多个文件的例子
2019/07/16 Python
python GUI库图形界面开发之PyQt5窗口布局控件QStackedWidget详细使用方法
2020/02/27 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
Python进行特征提取的示例代码
2020/10/15 Python
CSS3 Notes: -webkit-box-reflect实现倒影的实例
2016/12/08 HTML / CSS
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
数控技术专科生自我评价
2014/01/08 职场文书
幼教简历自我评价
2014/01/28 职场文书
经营理念标语
2014/06/21 职场文书
综治工作汇报材料
2014/10/27 职场文书
2014年信访工作总结
2014/11/17 职场文书
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android