laydate组件选择时间段的判断
前言:
在使用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组件选择时间段的判断的更多相关文章
- angular2+ 引用layDate日期选择插件
layDate日期选择插件使用npm安装好像是行不通的,但angular2+的日期选择控件库又不能够支持时分秒的选择 在angular项目中引用layDate 1. 首先官网下载layDate独立版, ...
- laydate年份选择,关闭底框,点击指定年份就选择然后关闭控件,翻页不选择也不关闭控件
如下图,翻页不选择也不关闭.点击指定年份时再选择和关闭控件 代码如下 // 默认没有选择,把判断赋值当前时间 var iYearCode = parseInt(new Date().getFullYe ...
- guava 学习笔记 使用瓜娃(guava)的选择和预判断使代码变得简洁
guava 学习笔记 使用瓜娃(guava)的选择和预判断使代码变得简洁 1,本文翻译自 http://eclipsesource.com/blogs/2012/06/06/cleaner-code- ...
- WINCE6.0组件选择说明
WINCE6.0组件选择说明 图1 RAS/PPP组件前面的√标识表示我们手动选择,TAPI2.0前面的■标识表示选组件时根据依赖关系自动选择的,PPPoE前面的□标识组件没有选择.
- Shell 从日志文件中选择时间段内的日志输出到另一个文件
Shell 从日志文件中选择时间段内的日志输出到另一个文件 情况是这样的,某系统的日志全部写在一个日志文件内,所以这个文件非常大,非常长,每次查阅的时候非常的不方便.所以,相关人员希望能够查询某个时间 ...
- Qt5安装及组件选择(Qt 5.12.0)
组件选择 如下图所示,安装Qt时有选择组件这一步,全部安装未免太占磁盘控件,只需安装我们所需要的组件即可.接下来就分析分析各个组件的作用及含义. “Qt 5.12.0”节点下面是 Qt 的功能模块,包 ...
- layui(一)——layDate组件常见用法
和 layer 一样,我们可以在 layui 中使用 layDate,也可直接使用 layDate 独立版,可按照实际需求来选择.options整理如下: layui.use('laydate', f ...
- 使用FolderBrowserDialog组件选择文件夹
实现效果: 知识运用: FolderBrowserDialog组件的ShowDialog方法 //弹出选择路径对话框 public DialogResult ShowDialog() 和Selecte ...
- 解决vue中使用laydate.js选择日期后再修改其他model时日期会被清空问题
首先描述一下问题,下图中均绑定v-model,例如先选择出生开始时间,然后当再选择地区或其他选项时该时间就会被清空 首先看一下我这边开始的默认值,开始我设置都为空 当我选择如下图的生日开始时间与结束时 ...
随机推荐
- pascal倒序输出
program Project6; {$APPTYPE CONSOLE} uses SysUtils; var a,b,c,d:integer; begin { TODO -oUser -cConso ...
- Mysql数据库的用户和日志管理
Mysql数据库的用户和日志管理 数据库的用户管理 1.mysql用户账号管理 用户账号 user@host user:账户名称 host:此账户可通过哪些客户端主机请求创建连接线程,可以是ip.主机 ...
- Day.js 是一个仅 2kb 大小的轻量级 JavaScript 时间日期处理库,和 Moment.js 的 API 设计保持完全一样,dayjs
https://gitee.com/mirrors/Day.js api: https://gitee.com/mirrors/Day.js/blob/master/docs/zh-cn/API-re ...
- ASP.NET Core MVC 打造一个简单的图书馆管理系统 (修正版)(一) 基本模型以及数据库的建立
前言: 本系列文章主要为我之前所学知识的一次微小的实践,以我学校图书馆管理系统为雏形所作. 本系列文章主要参考资料: 微软文档:https://docs.microsoft.com/zh-cn/asp ...
- vscode等编辑器正则一键剔除注释的方法
匹配HTML单行注释: <!--(.*?)--> 匹配HTML多行注释: <!--([\s\S|\r]*?)--> 或者: <!--([\w\W]*?)--> 除了 ...
- 使用Docker Compose编排微服务
一般微服务架构会包含若干个微服务,而每个微服务可以有多个实例,如果每个微服务都有手动启停,那么效率就很低.维护量比较大. 所以我们可以使用Docker Compose来轻松.高效地管理容器. 一.安装 ...
- POJ 2833 The Average(优先队列)
原题目网址:http://poj.org/problem?id=2833 本题中文翻译: 描述 在演讲比赛中,当选手完成演讲时,评委将对他的演出进行评分. 工作人员删除最高成绩和最低成绩,并计算其余成 ...
- javascript监听值变化
最近面了有道前端实习,人品爆发一面过了.但是在一面中面试官问了一个问题”MVC用javascript如何实现?如果实现双向绑定?值变化监听?“ 当时我回答”js好像没函数进行值变化监听“ 后来想想很不 ...
- 使用方向变换(directional transform)图像分块压缩感知
论文的思路是先介绍分块压缩感知BCS,然后介绍使用投影和硬阈值方法的迭代投影方法PL,接着将PL与维纳滤波器结合形成SPL(平滑PL),并且介绍了稀疏表示的几种基,提出了两种效果较好的稀疏基:CT与D ...
- 【转载】WebConfigurationManager和ConfigurationManager
原文链接 今天在写程序时偶然发现有的示例代码中是用WebConfigurationManager获取web.config中的配置信息的,因为之前一直都是用的ConfigurationManager,所 ...