laydate时间控件：开始时间，结束时间最大最小值
时间控件地址及插件下载链接：https://www.layui.com/doc/modules/laydate.html
填充时间已两个功能为例；
1.添加功能 ：时间
规则：选择开始时间后，点击结束时间必须大于开始时间；
如果先选择结束时间，开始时间必须小于结束时间；
代码如下：
<html>
<body>
<input type="text" class="cousre-time" id="startTime" placeholder="开始时间"
name="startTime" />
<span>-</span>
<input type="text" class="cousre-time" id="endTime" placeholder="结束时间"
name="endTime" />
</body>
<script>
layui.use('laydate', function() {
var laydate = layui.laydate; //开始时间
var start = laydate.render({
elem : '#startTime',
type : 'datetime', //可选择：年月日时分秒
theme : 'molv',
trigger : 'click', //采用click弹出
done : function(value, date, endDate) {
end.config.min = {
year : date.year,
month : date.month - 1,
date : date.date,
hours : date.hours,
minutes : date.minutes,
seconds : date.seconds
}; //开始日选好后，重置结束日的最小日期
end.config.value = {
year : date.year,
month : date.month - 1,
date : date.date,
hours : date.hours,
minutes : date.minutes,
seconds : date.seconds
}; //将结束日的初始值设定为开始日
}
});
//结束时间
var end = laydate.render({
elem : '#endTime',
type : 'datetime', //可选择：年月日时分秒
theme : 'molv',
trigger : 'click', //采用click弹出
done : function(value, date, endDate) {
start.config.max = {
year : date.year,
month : date.month - 1,
date : date.date,
hours : date.hours,
minutes : date.minutes,
seconds : date.seconds
}; //结束日选好后，重置开始日的最大日期
}
});
});
</script>
</html>
2.编辑功能：时间
规则 ：默认有个初始值；
选择开始时间后，点击结束时间必须大于开始时间；
如果先选择结束时间，开始时间必须小于结束时间；
代码如下：
<script type="text/javascript">
//${project.startTime.time} 是因为 在jsp下写的；可替换成html;或者直接在laydate.render里添加也行
var startTimeString = formatDate(new Date([[${project.startTime.time}]]));
var endTimeString = formatDate(new Date([[${project.endTime.time}]]));
layui.use('laydate', function() {
var laydate = layui.laydate; //开始时间
var start = laydate.render({
elem : '#startTime',
type : 'datetime', //可选择：年月日时分秒
theme : 'molv',
value : startTimeString,
trigger : 'click', //采用click弹出
max : endTimeString,
done : function(date) {
end.config.min = {
year : date.year,
month : date.month - 1,
date : date.date,
hours : date.hours,
minutes : date.minutes,
seconds : date.seconds
}; //开始日选好后，重置结束日的最小日期
}
});
//结束时间
var end = laydate.render({
elem : '#endTime',
type : 'datetime', //可选择：年月日时分秒
theme : 'molv',
value : endTimeString,
trigger : 'click', //采用click弹出
min : endTimeString,
done : function(value, date, endDate) {
start.config.max = {
year : date.year,
month : date.month - 1,
date : date.date,
hours : date.hours,
minutes : date.minutes,
seconds : date.seconds
}; //结束日选好后，重置开始日的最大日期
}
});
});
</script>
laydate时间控件：开始时间，结束时间最大最小值的更多相关文章
- 关于Web项目里的给表单验证控件添加结束时间不得小于开始时间的验证方法，日期转换和前台显示格式之间，还有JSON取日期数据格式转换成标准日期格式的问题
项目里有些不同页面间的日期显示格式是不同的, 第一个问题: 比如我用日期控件WdatePicker.js导包后只需在input标签里加上onClick="WdatePicker()" ...
- element-UI时间控件：日期时间的选择范围的控制方法
例:如一段已知的时间范围,为2018-10-01 - 2019-01-01 :当前为2018-07-09日,则今天以前的时间不能选择,以及2019-01-01以后的时间不能选:实现如下: <el ...
- php 本周开始时间和结束时间；本月开始时间结束时间；上月开始时间结束时间
<?php /** * 功能:取得给定日期所在周的开始日期和结束日期 * 参数:$gdate 日期,默认为当天,格式:YYYY-MM-DD * $first 一周以星期一还是星期天开始,0为星期 ...
- 日期与时间控件QDate, QTime, QDateTime
QDate类用于处理公历日期.QTime类用于处理时间.QDateTime类将QDate对象和QTime对象整合为一个对象 QDate: from PyQt5.QtCore import QDate, ...
- Bootstrap中时间（时间控件）的设计
运用bootstrap的时间控件,生成时间选择器. 1.截图:有以下这些样式 10年视图 年视图 月视图 日视图 小时视图 2.视图设计: ...
- bootstrap 时间控件
近期使用了bootstrap的UI感觉确实非常美丽,非常值得学习和使用. 以下先简单了解下bootstrap的时间控件. 这个时间控件使用起来还是很的简单.仅仅须要引入主要的css和js就能够了 须要 ...
- C#--DataGridView添加DateTimePicker时间控件
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- layui时间控件联动：开始时间、结束时间，有效时间范围
实际开发中,经常遇到时间控件联动的情况,然后每次都网上搜代码Copy,不过每次都有点小Bug让你错不及防: 这次,在这里备份一下,以后Copy自己的得了(欢迎Copy代码,若遇到问题,请麻烦回复我一下 ...
- layui时间控件laydate
主要解决点击年份立马关闭控件弹窗实现和控件闪退问题 <div class="date-box"> 日期选择 : <input id="xl-2" ...
随机推荐
- spark操作hive方式(scala)
第一种方式: def operatorHive: Unit = { Class.forName("org.apache.hive.jdbc.HiveDriver") val url ...
- 二十一.构建memcached服务、LNMP+memcached、PHP的本地Session信息、PHP实现session共享
proxy client web1 web2 1.构建memcached服务 ]# yum -y install memcached ]# cat /etc/sysconfig/memcached ...
- Linux--系统调优
建议看看:https://www.cnblogs.com/yinzhengjie/p/9994207.html 一.关闭swap交换分区 Linux swapoff命令用于关闭系统交换区(swap a ...
- meshing-三棱锥结构化网格
原视频下载地址: https://yunpan.cn/cqcq2gE6Iy2P8 访问密码 7d5a
- mysql安装和简要操作命令+python基本操作mysql数据库
mysql数据库是一种关系型数据库管理系统. 一. windows平台安装Mysql数据库. Mysql数据库官网 :https://dev.mysql.com/downloads/windows/ ...
- mysql 触发器语法详解
1.创建Mysql触发器: 语法: CREATE TRIGGER trigger_name trigger_time trigger_event ON tbl_name FOR EACH ROW BE ...
- MAC将根目录文件夹的权限赋给用户
https://my.oschina.net/liujiest/blog/762004 1.sudu -i进入root模式(需输入密码) 2.chown -R 用户名 /文件夹名 sudo -i Pa ...
- Python问题：error: Microsoft Visual C++ 9.0 is required
Python问题:error: Microsoft Visual C++ 9.0 is required 原因是缺少编译C的 VCForPython包. 解决办法: 安装VCForPython即可. ...
- 【Java】能提高日常工作效率的一些Java函数
自编工具总是临时抱佛脚来得顺溜,宜常备手边以提高工作效率: package com.hy; import java.io.File; /** * 日常工作常用的一些工具方法 * @author 逆火 ...
- Flume-Hbase-Sink针对不同版本flume与HBase的适配研究与经验总结
https://cloud.tencent.com/developer/article/1025430 Flume-Hbase-Sink针对不同版本flume与HBase的适配研究与经验总结 mike ...