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" ...
随机推荐
- idea在src/main/java下新建包后项目中只显示src/main，后面的东西不显示，但在本地磁盘中是存在的
去掉图中的勾
- IntelliJ IDEA使用教程一 介绍&安装&配置
http://blog.csdn.net/nextyu/article/details/47206015 全套
- 使用jQuery快速高效制作网页交互特效---jQuery选择器
一.什么是jQuery选择器 Query选择器继承了CSS与Path语言的部分语法,允许通过标签名.属性名或内容对DOM元素进行快速.准确的选择, 而不必担心浏览器的兼容性,通过jQuery选择器对页 ...
- Tcl在Vivado中的应用
转载: https://blog.csdn.net/avrmcu1/article/details/43446529?utm_source=blogxgwz6
- 一、RabbitMQ 基础理解
RabbitMQ,是一个使用 erlang 编写的 AMQP(高级消息队列协议)的服务实现,简单来说,就是一个功能强大的消息队列服务 概念理解: Producer: 消息发送者 RabbitMQ Vh ...
- 点击按钮切换内容效果(使用CSS DIV与JavaScript)
<head><script type="text/javascript">function change_div(id){ if (id == 'gsyw ...
- springBoot学习（二）：初学JPA
依旧跟着大佬学习JPA,在这里记下过程. JPA主要做的事情是简化数据库操作,至少现在为止,我觉得还是挺方便简单明了的.在原本代码的基础下,更改UserController.User.UserRepo ...
- [vsftpd] ubuntu14.04 ansible剧本安装vsftpd流程及报错排查
需求: 在ubuntu14.04机器上搭建ftp服务,ftp账号通过winscp软件登录后,仅可增删改/data/wwwroot目录. 一.安装步骤 1.apt 安装vsftpd apt-get in ...
- Tomcat单独部署,控制台乱码解决方法
使用Tomcat作为容器,部署项目的时候,发现控制台总是乱码,乱码如下 打开Tomcat的部署目录 找到这一行,将UTF-8改成GBK java.util.logging.ConsoleHandler ...
- 分布式锁 ----zookeeper实践 (排它锁)
排它锁概念: Exclusive Locks,被称为X锁,写锁,独占锁.如果事物T1对数据对象O1加上了排它锁,那么在整个加锁期间,只允许事务T1对O1进行读写操作,其他事务必须等到T1释放锁后才能进 ...