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" ...
随机推荐
- 【安卓周记】笔记复习记录：No.1
[安卓] 1. 安装APK记得考虑兼容7.0,Uri不能直接从Uri.parse()中构建,要使用FileProvider构建Uri. <provider android:name=" ...
- sphinx和coreseek
sphinx是国外的一款搜索软件. coreseek是在sphinx的基础上,增加了中文分词功能,换句话说,就是支持了中文. Coreseek发布了3.2.14版本和4.1版本,其中的3.2.14版本 ...
- 078_使用 egrep 过滤 MAC 地址
#!/bin/bash#MAC 地址由 16 进制组成,如 AA:BB:CC:DD:EE:FF#[0-9a-fA-F]{2}表示一段十六进制数值,{5}表示连续出现 5 组前置:的十六进制egrep ...
- umediter实现粘贴word图片
图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,找到UM ...
- BZOJ 1576 树剖+LCT
题意:给定一张图,保证 $1$ 号点到其他所有点的最短路径是唯一的,求:对于点 $i$,不经过 $1$ 到 $i$ 最短路径上最后一条边的最短路. 题解:可以先建出最短路树,然后枚举每一条非树边. 对 ...
- 第12章、乐活人生的ABCDE
目录 第12章.乐活人生的ABCDE 什么时候该乐观 让自己乐观的ABC 确认ABC 你的ABC记录 反驳和转移注意 转移注意 反驳 保持距离 学习与自己争辩 证据 其他可能性 暗示 用处 你的反驳记 ...
- php关于mysql长连接问题
1.当 函数 mysql_connect 的前三个参数(server username password)相同,并且第四个参数(new_link)不传递时候,重复调用 mysql_connect 是会 ...
- java中int 和String相互转换
一.String转为int int i=Integer.parseInt(string):int i=Integer.valueOf(s).intValue(); 二.int转为String Stri ...
- [转载]workbench分网---mapped face meshing面映射网格划分
原文地址:face meshing面映射网格划分">workbench分网---mapped face meshing面映射网格划分作者:一丝尘埃 face meshing面映射网格划 ...
- 深入理解JVM虚拟机4：Java class介绍与解析实践
用java解析class文件 转自https://juejin.im/post/589834a20ce4630056097a56 前言 身为一个java程序员,怎么能不了解JVM呢,倘若想学习JV ...