前言:

在使用laydate组件的时候,难免会遇到选择时间段,官网给的文档中有选择时间段的组件,但是并不好用,首先只能选择一个月的时间段,有局限性,其次精确到时间的话要先选日期范围再选时间范围,很变态,还是用两个组件比较合适,但是用两个组件的话需要做判断,因为起始时间肯定不能在结束时间之后,反之亦然,本文记录的是如何解决这一判断。

效果图:

1、官网给的效果:

2、需要实现的效果:

假设起始时间如下:

在起始时间之前的时间皆为灰色不可选状态:

参考代码:

var time_start =laydate.render({
  elem : '#beginTime',
  type : 'datetime',
  done: function(value,date, endDate) {
    time_end.config.min = {
      year: date.year,
      month: date.month - 1,
      date: date.date,
      hours: date.hours,
      minutes: date.minutes,
      seconds: data.seconds
    }
    if(compareDate(value,$("#endTime").val())) {
      $("#endTime").val("");
    }
  }
});
var time_end = laydate.render({
  elem : '#endTime',
  type : 'datetime',
  done: function(value,date, endDate) {
    time_start.config.max = {
      year: date.year,
      month: date.month - 1,
      date: date.date,
      hours: date.hours,
      minutes: date.minutes,
      seconds: data.seconds
    }
    if(compareDate($("#beginTime").val(),value)) {
      $("#beginTime").val("");
    }
  }
});
function compareDate(d1,d2){
  return ((new Date(d1.replace(/-/g,"\/"))) > (new Date(d2.replace(/-/g,"\/"))));
}

laydate组件选择时间段的判断的更多相关文章

  1. angular2+ 引用layDate日期选择插件

    layDate日期选择插件使用npm安装好像是行不通的,但angular2+的日期选择控件库又不能够支持时分秒的选择 在angular项目中引用layDate 1. 首先官网下载layDate独立版, ...

  2. laydate年份选择,关闭底框,点击指定年份就选择然后关闭控件,翻页不选择也不关闭控件

    如下图,翻页不选择也不关闭.点击指定年份时再选择和关闭控件 代码如下 // 默认没有选择,把判断赋值当前时间 var iYearCode = parseInt(new Date().getFullYe ...

  3. guava 学习笔记 使用瓜娃(guava)的选择和预判断使代码变得简洁

    guava 学习笔记 使用瓜娃(guava)的选择和预判断使代码变得简洁 1,本文翻译自 http://eclipsesource.com/blogs/2012/06/06/cleaner-code- ...

  4. WINCE6.0组件选择说明

    WINCE6.0组件选择说明 图1 RAS/PPP组件前面的√标识表示我们手动选择,TAPI2.0前面的■标识表示选组件时根据依赖关系自动选择的,PPPoE前面的□标识组件没有选择.

  5. Shell 从日志文件中选择时间段内的日志输出到另一个文件

    Shell 从日志文件中选择时间段内的日志输出到另一个文件 情况是这样的,某系统的日志全部写在一个日志文件内,所以这个文件非常大,非常长,每次查阅的时候非常的不方便.所以,相关人员希望能够查询某个时间 ...

  6. Qt5安装及组件选择(Qt 5.12.0)

    组件选择 如下图所示,安装Qt时有选择组件这一步,全部安装未免太占磁盘控件,只需安装我们所需要的组件即可.接下来就分析分析各个组件的作用及含义. “Qt 5.12.0”节点下面是 Qt 的功能模块,包 ...

  7. layui(一)——layDate组件常见用法

    和 layer 一样,我们可以在 layui 中使用 layDate,也可直接使用 layDate 独立版,可按照实际需求来选择.options整理如下: layui.use('laydate', f ...

  8. 使用FolderBrowserDialog组件选择文件夹

    实现效果: 知识运用: FolderBrowserDialog组件的ShowDialog方法 //弹出选择路径对话框 public DialogResult ShowDialog() 和Selecte ...

  9. 解决vue中使用laydate.js选择日期后再修改其他model时日期会被清空问题

    首先描述一下问题,下图中均绑定v-model,例如先选择出生开始时间,然后当再选择地区或其他选项时该时间就会被清空 首先看一下我这边开始的默认值,开始我设置都为空 当我选择如下图的生日开始时间与结束时 ...

随机推荐

  1. Codeforces Round #409(Div.2)

    传送门 题意 A.询问最多改变一个字符的字符串"VK"子串数量 B.f(x,z)=y,给出x,y,求z For example, f("ab", "b ...

  2. python 面向对象十 __init__和__new__

    一.__init__和__new__方法 __init__ 和 __new__ 最主要的区别在于:1.__init__ 通常用于初始化一个新实例,控制这个初始化的过程,比如添加一些属性, 做一些额外的 ...

  3. Qt下存储读写应用程序设置的三种方法

    一.简介 用户对应用程序经常有这样的要求:要求它能记住它的settings,比如窗口大小.位置和密码等等.有三种方法可以实现: 使用注册表: 使用配置文件(.ini): 使用自定义文件(例如.txt) ...

  4. ORACLE数据库的备份分为物理备份和逻辑备份两种。

    物理备份是将实际组成数据库的操作系统文件从一处拷贝到另一处的备份过程,通常是从磁盘到磁带.可以使用 Oracle 的恢复管理器(Recovery Manager,RMAN)或操作系统命令进行数据库的物 ...

  5. AJPFX:关于面向对象的封装

    1.回顾        面向对象 -- 注重的是结果,强调的是具备功能的对象.        面向过程 -- 强调的是函数,注重的实现的过程.        函数:对功能的封装.            ...

  6. 个人复习记录之-js

    1变量:内存中储存一个数据的储存空间. 使用:声明,赋值,取值.注 不能以数字开头,不能用保留字 *声明提前:在程序正式执行前,都会将所有var声明的变量提前到开始位置,集中创建***赋值留在原地** ...

  7. 《基于Node.js实现简易聊天室系列之环境搭建》

    前文提到了Demo所涉及的技术,现在讲环境(工具)的配置.环境的配置主要是数据库mongDB和Node.js的配置. Node.js Node.js的官方地址:https://nodejs.org/e ...

  8. 关于Android软键盘把布局顶上去的问题

    首先说下我的需求:布局最上面是一个bar,有左上角返回按钮和标题,bar下面是一个ScrollView,里面有各种TextView和EditText, 点击下面的EditText时,不希望软键盘把ba ...

  9. SQL将查询出来的多列的值拼接成一个字符串

    -- 单列拼接,先查出一行,再加上逗号,接着拼接 查出的下一行 SELECT GROUP_CONCAT(user_id) FROM user; -- result 160,160,160,196 -- ...

  10. 仿陌陌的ios客户端+服务端源码

    软件功能:模仿陌陌客户端,功能很相似,注册.登陆.上传照片.浏览照片.浏览查找附近会员.关注.取消关注.聊天.语音和文字聊天,还有拼车和搭车的功能,支持微博分享和查找好友. 后台是php+mysql, ...