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 得到变量类型的函数
May 19 Javascript
使用jquery为table动态添加行的实现代码
Mar 30 Javascript
jQuery 数据缓存模块进化史详细介绍
Nov 19 Javascript
JavaScript把数组作为堆栈使用的方法
Mar 20 Javascript
非常棒的jQuery图片轮播效果
Apr 17 Javascript
浅谈angularjs中响应回车事件
Apr 24 Javascript
React服务端渲染(总结)
Jul 01 Javascript
js自定义trim函数实现删除两端空格功能
Feb 09 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
May 21 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 Javascript
ant design vue导航菜单与路由配置操作
Oct 28 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
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
php session 写入数据库
2016/02/13 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
JavaScript中的Array对象使用说明
2011/01/17 Javascript
简单的前端js+ajax 购物车框架(入门篇)
2011/10/29 Javascript
深入理解javascript中return的作用
2013/12/30 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
jQuery事件_动力节点Java学院整理
2017/07/05 jQuery
js构造函数创建对象是否加new问题
2018/01/22 Javascript
vue非父子组件通信问题及解决方法
2018/06/11 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
Vue中的$set的使用实例代码
2018/10/08 Javascript
Electron中实现大文件上传和断点续传功能
2018/10/28 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
2018/12/07 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
世界上最短的数字判断js代码
2019/09/09 Javascript
[42:22]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第一局
2016/02/27 DOTA
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
Python读取键盘输入的2种方法
2015/06/16 Python
python爬虫的工作原理
2017/03/05 Python
python中模块查找的原理与方法详解
2017/08/11 Python
python解决字符串倒序输出的问题
2018/06/25 Python
分享Python切分字符串的一个不错方法
2018/12/14 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
python 追踪except信息方式
2020/04/25 Python
经典c++面试题五
2014/12/17 面试题
教学质量评估实施方案
2014/03/17 职场文书
抽样调查项目计划书
2014/04/24 职场文书
充分就业社区汇报材料
2014/05/07 职场文书
护士自荐信怎么写
2015/03/06 职场文书