使用layui在规定的期限内选择日期
这几天碰到了layui中的日期与时间这个，本以为很简单的，可是又一个需求是这样的，有两个日期选择框，第一个日期选择框要求最小日期不得小于当前日期，第二个日期选择框要求最小日期为第一个日期选择框的选中日期，最大日期须在24小时内，本以为不会很难。
于是按照惯例，先渲染第一个日期选择框，然后渲染第二个日期选择框，结果后来发现这样行不通。还是直接上具体的代码吧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>layer</title>
<link rel="stylesheet" href="../dist/css/layui.css">
</head>
<body>
<form action="" class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">
<label for="" class="layui-form-label">时间段</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="startTime">
</div>
<div class="layui-form-mid">到</div>
<div class="layui-input-inline endTime">
<input type="text" class="layui-input" id="endTime">
</div>
</div>
</div>
</form>
<script src="../dist/jquery.min.js"></script>
<script src="../dist/layui.js"></script>
<script>
let [form,laydate] = ["",""];
var now = new Date();
var start = now.getTime(); // 将当前时间转换为时间戳
layui.use(['form','laydate'],function(){
form = layui.form;
laydate = layui.laydate;
laydate.render({
elem:'#startTime',
type:'datetime', // 可选择年、月、日、时、分、秒
min:start, // 规定最小日期
done:function(value){
// value为第一个日期选择框选择的日期
const start2 = new Date(value).getTime();
const end = start2 + 24*60*60*1000;
const elemId = "endTime" + new Date().getTime();
// 当第一个日期选择框选择完日期后，将类选择器endTime里的内容清空，给它重新添加内容，且新添加元素的id是动态改变的，这样第二个日期框在第一个日期框每次选择完后会重新渲染
$('.endTime').empty().append(`<input type="text" class="layui-input" id="${elemId}">`)
laydate.render({
elem:`#${elemId}`,
type:'datetime',
min:start2, // 最小日期不得小于第一个日期选择框的值
max:end // 最大日期在24小时内
})
}
});
})
</script>
</body>
</html>
虽然这样能解决问题，能保证第二个日期框最小值为第一个日期框的选择值，最大值为第一个日期选择值的24小时内。但是中间存在着一个bug，那就是只有选择第一个日期框后，才能更改第二个日期框中的值，显然这不是我们想要的，我们想要的是，可以直接更改第二个日期框的值，同时满足条件：最小值为第一个日期框的选择值，最大值为第一个日期选择值的24小时内。那么这时候就要对第二个日期框再渲染一次，只不过这次不是在第一个日期框选择后的回调函数里渲染，而是与第一个日期框一起渲染。那么此时的代码为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>layer</title>
<link rel="stylesheet" href="../dist/css/layui.css">
</head>
<body>
<form action="" class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">
<label for="" class="layui-form-label">时间段</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="startTime">
</div>
<div class="layui-form-mid">到</div>
<div class="layui-input-inline endTime">
<input type="text" class="layui-input" id="endTime">
</div>
</div>
</div>
</form>
<script src="../dist/jquery.min.js"></script>
<script src="../dist/layui.js"></script>
<script>
let [form,laydate] = ["",""];
var now = new Date();
var start = now.getTime(); // 将当前时间转换为时间戳
layui.use(['form','laydate'],function(){
form = layui.form;
laydate = layui.laydate;
laydate.render({
elem:'#startTime',
type:'datetime', // 可选择年、月、日、时、分、秒
min:start, // 规定最小日期
done:function(value){
// value为第一个日期选择框选择的日期
const start2 = new Date(value).getTime();
const end = start2 + 24*60*60*1000;
const elemId = "endTime" + new Date().getTime();
// 当第一个日期选择框选择完日期后，将类选择器endTime里的内容清空，给它重新添加内容，且新添加元素的id是动态改变的，这样第二个日期框在第一个日期框每次选择完后会重新渲染
$('.endTime').empty().append(`<input type="text" class="layui-input" id="${elemId}">`)
laydate.render({
elem:`#${elemId}`,
type:'datetime',
min:start2, // 最小日期不得小于第一个日期选择框的值
max:end // 最大日期在24小时内
})
}
});
laydate.render({
elem:'#endTime',
type:'datetime',
min:, // 该值为第一个日期框的值，一般是从服务器端获取
max: // 该值为第一个日期框值的24小时内，可用时间戳来解决
})
})
</script>
</body>
</html>
使用layui在规定的期限内选择日期的更多相关文章
- ExtJs内的datefield控件选择日期过后的事件监听select
[摘要]: 选择时间过后我们为什么需要监听事件?一般有这样一种情况,那就是用于比较两个时间大小或者需要判断在哪个时间点上需要做什么样的操作.基于这样的种种情况,我们很有必要琢磨一下datefield控 ...
- jquery 时间控件怎么能禁止输入只能选择日期？
jsp一个input输入框用的是easyui时间控件,现在问题是如何是这个input只能点击选择日期,而禁止手动输入 解决方法::: 在日期的input标签里面添加::::editable=" ...
- [js开源组件开发]js手机联动选择日期 开源git
js手机联动选择日期 这里在前面的<js手机联动选择地区>的基础上,改造数据源之后形成的一个日期的选择器,当然你可以使用之前的PC上模式的<日期控件>,它同时也支持手机端,ht ...
- asp.net 弹出式日历控件 选择日期 Calendar控件
原文地址:asp.net 弹出式日历控件 选择日期 Calendar控件 作者:逸苡 html代码: <%@ Page Language="C#" CodeFile=&quo ...
- 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间
原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...
- easyUI日期框返回到月份，选择日期也只到月份
easyUI日期框返回到月份,选择日期也只到月份,不是原创,引用了园友的一篇文章,自己写下来,以便不时之需,谢谢. 1 $(function () { $('#date').datebox({ onS ...
- mysql的内建日期处理函数
下面的表格列出了MySQL 中最重要的内建日期函数: 函数 描述 NOW() 返回当前的日期和时间 CURDATE() 返回当前的日期 CURTIME() 返回当前的时间 DATE() 提取日期或日期 ...
- http://www.layui.com/doc/modules/laydate.html实时通信\日期、==插件
8520**ali chengyouli http://www.layui.com/doc/modules/laydate.html实时通信\日期.==插件
- JMeter 内置日期(时间)函数总结
JMeter 内置日期(时间)函数总结 by:授客 QQ:1033553122 1. 测试环境 apache-jmeter-3.3 下载地址: http://jmeter.apache.org/c ...
随机推荐
- Linux下磁盘监控及系统版本-CPU-内存等查看
1.磁盘IO监控工具 iotop 输入命令:iotop 主要查看程序使用的磁盘IO的信息 安装:yum -y install iotop 第一行:10:01:23 — 当前系统时间126 days ...
- thinkphp3.2.3使用ajax 的一些坑——使用AjaxReturn()后，直接返回null，模板文件不起作用
从接触thinkphp到今天,填完此坑,必有其他的坑有会冒出来.哎!这个填坑之路我想是没有尽头的了. 最近,需要使用ajax完成一些操作,一开始想Ajax简单啊,不过是一种提交数据的方式,不过是害苦了 ...
- 前端之 HTML🎃
HTML这知识点很多很杂,所以整理很乱.所以将就看.
- 各类模块的粗略总结(time,re,os,sys,序列化,pickle,shelve.#!json )
***collections 扩展数据类型*** ***re 正则相关操作 正则 匹配字符串*** ***time 时间相关 三种格式:时间戳,格式化时间(字符串),时间元组(结构化时间).***`` ...
- Spark源码剖析（八）：stage划分原理与源码剖析
引言 对于Spark开发人员来说,了解stage的划分算法可以让你知道自己编写的spark application被划分为几个job,每个job被划分为几个stage,每个stage包括了你的哪些代码 ...
- 15个超强悍的CSS3圆盘时钟动画赏析
在网页上,特别是个人博客中经常会用到时钟插件,一款个性化的时钟插件不仅可以让页面显得美观,而且可以让访客看到当前的日期和时间.今天我们给大家收集了15个超强悍的圆盘时钟动画,很多都是基于CSS3,也有 ...
- 使用MyBatis时接收值和返回值选择Map类型或者实体类型
MyBatis作为现近JavaEE企业级项目开发中常用的持久层框架之一,以其简洁高效的ORM映射和高度的SQL的自由性被广大开发人员认可.Mybatis在接收系统传来的参数和返回的参数时主要可以有Ma ...
- File API文件操作之FileReader二
上一篇说了FileAPI中FileReader的readAsText,这里继续上文,说说另外一个API readAsDataURL. 这个接口是将File或者Blob读成base64格式的字符串,然后 ...
- 使用腾讯云无服务器云函数（SCF）分析天气数据
欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 作者:李想 无服务器云函数(SCF)是腾讯云提供的Serverless执行环境,也是国内首款FaaS(Function as a Service ...
- QTableView表格自动拉伸
QTableView有四个关于自动拉伸的函数: void resizeColumnToContents(int column); void resizeColumnsToContens(); void ...