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" ...
随机推荐
- sql server join ,inner join ,left join ,right join 的使用
测试数据脚本 CREATE TABLE Atable ( S# INT, Sname nvarchar(32), Sage INT, Sfrom nvarchar(8) ) insert into A ...
- TensorFlow(十三)：模型的保存与载入
一:保存 import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data #载入数据集 mnist ...
- NetworkX系列教程(8)-Drawing Graph
小书匠Graph图论 如果只是简单使用nx.draw,是无法定制出自己需要的graph,并且这样的graph内的点坐标的不定的,运行一次变一次,实际中一般是要求固定的位置,这就需要到布局的概念了.详细 ...
- rdma centos 7.3安装
rdma centos 7.3安装 corasql0人评论7680人阅读2017-05-28 16:29:40 1.安装依赖包 yum install epel-release -y yum ...
- easy-table-vue+VueJs、SpringBoot+Mybatis实现MVVM模型前后台数据交互
该项目分为前端展示部分和后台服务部分. 前端部分 使用的技术是:NodeJs.Webpack.VueJs 使用的组件库是:IVIEW.easy-table-vue 使用的开发工具是:WebStorm ...
- matplot 绘制折线图
#coding=utf-8 import matplotlib.pyplot as pltx_data = ['2011','2012','2013','2014','2015','2016','20 ...
- ie 使用window.open页面报错
window.open(url)打开新页面是如果要通过地址栏来传参要注意 var qt = ""; qt += "&teachMaterialDealInfo.b ...
- 怎么样修改小程序分享的title/onShareAppMessage
onShareAppMessage: function (res) { if (res.from === 'button') { // 来自页面内转发按钮 console.log(res.target ...
- ICEM-圆锥的一种画法
原视频下载地址:https://yunpan.cn/cqK53dKBnduM9 访问密码 42be
- AHOI2012树屋阶梯
这玩意不是卡特兰的经典模型吗…… 我们设方案数为f(i),则f(0)=1,f(1)=1,f(2)=2,f(3)=5,(其实到这里你再手模一个就出来了)我们把左上角的矩形删掉,则会变成下方和右方两个更小 ...