首页 > 其他分享 >input表单开始时间和结束时间的选取,laydate

input表单开始时间和结束时间的选取,laydate

时间:2024-02-05 12:01:42浏览次数:21  
标签:结束 laydate 开始 表单 date 时间 var input

接手了一个项目, 里面使用的是laydate, 新需求描述:开始时间要大于当前时间,结束时间要大于开始时间。

经过自己的研究, 实现功能

代码如下: 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>开始时间和结束时间</title>
</head>
<body>
 
日期时间:<input type="text" id="startTime" placeholder='开始时间'>
<input type="text" id="endTime" placeholder='结束时间'>
 
<script src="./laydate/laydate.js"></script>
<script>
 
function changeDate(){
	var date = new Date();
	var y = date.getFullYear();
	var m = date.getMonth()+1;
	m = m<10 ? ('0'+ m) :m;
	var d = date.getDate();
	d = d<10 ? ('0'+ d) :d;
	var h = date.getHours();
	h = h<10 ? ('0'+ h) :h;
	var i = date.getMinutes();
	i = i<10 ? ('0'+ i) :i;
	var s = date.getSeconds();
	s = s<10 ? ('0'+ s) :s;
	return y+'-'+m+'-'+d+' '+h+':'+i+':'+s;
}
var now = changeDate();
//console.log(now);
	var startTime =laydate.render({
		elem: '#startTime',
		type: 'datetime',
		min: now,
		max: '2035-12-31 12:30:00',
		done: function(value, date, endDate) {
			endLayDate.config.min = {
				year: date.year,
				month: date.month - 1,
				date: date.date,
				hours: date.hours,
				minutes: date.minutes,
				seconds: date.seconds +1
			};
		},
	});
	/*时间插件*/
	var endLayDate = laydate.render({
		elem: '#endTime',
		type: 'datetime',
		max: '2035-12-31 12:30:00',
		btns: ['clear', 'confirm'],  //clear、now、confirm
		done: function(value, date, endDate) {
			startTime.config.max = {
				year: date.year,
				month: date.month - 1,
				date: date.date,
				hours: date.hours,
				minutes: date.minutes,
				seconds: date.seconds -1
			};
		},
	});
</script>
</body>
</html>

标签:结束,laydate,开始,表单,date,时间,var,input
From: https://blog.51cto.com/ding/9603592

相关文章

  • 金蝶云星空创建普通动态表单
    ##动态表单的种类 ##动态表单与单据的区别单据本质上也是动态表单,只不过单据更多的是用来保存业务数据,而普通的动态表单是用来显示内容,可以简单的理解动态表单就是一个界面。另,单据的实体有对应的表,而动态表单没有。##新建普通动态表单业务需求:售后单明细点击按钮,弹出动......
  • 金蝶云星空表单服务规则设置-基础资料和复选框判断
     一、语法规则基础资料判断:标识=null复选框判断打钩:标识=true 二、业务需求售后单审核时,如果物料启用了序列号管理,明细序列号资料必须选择。 三、开发实现  四、测试记得一定要重新启动环境。 ......
  • el-upload 跟Form表单一起提交
     vue el-upload上传<el-col:span="20"><el-form-item:label="$t('message.common.file')"prop="uploadFileList"el-uploadclass="upload-demo"dragname="uploadFile'ref="upload"......
  • input框不允许手工输入,只允许设定好的值
    <inputtype="number"id="inputValue"value="10"min="10"max="200"step="10"onkeydown="returnfalse"onchange="updatePrice">这里重要的是onkeydown="returnfalse"这个......
  • jquery中的form表单提交
    使用jQuery提交表单是一个常见的操作,它简化了AJAX请求的处理过程。以下是几种使用jQuery提交表单的方法:1.使用.submit()直接提交表单如果你只是想在提交表单时运行一些额外的JavaScript,可以使用.submit()方法。这不会通过AJAX发送表单,而是触发表单的提交事件,并允许你......
  • 借助可视化表单搭建企业级低代码平台,实现流程化办公!
    实现高效率的流程化办公,利用低代码技术平台可以为企业带来高效益的办公目的。可视化表单是较为流行的办公利器,流辰信息经验足、产品丰富、服务品质好,可以为更多的企业搭建专属于企业的低代码技术平台,创造高效益的办公。1、低代码技术平台的市场价值什么是低代码平台?它究竟有什么......
  • 拖拽式在线表单设计节省开发效率,创造流程化办公!
    当前,实现流程化办公可以给企业创造高效率、高回报、高收益,因而已经成为众多企业追求的目标和梦想了。低代码技术平台是职场办公中的主流工具,利用拖拽式在线表单设计的众多优势和功能,可以助力企业创造高效率办公,实现数字化升级。什么是低代码技术平台?了解它的优势特点,就能更好地掌......
  • css中的resize设置、高度没有对齐、表单在校验、边框发生重叠
    小知识点汇总css❓:css中的resize设置......
  • 用可视化表单设计轻松实现流程化办公!
    在现代化职场办公中,低代码技术平台的利用程度越来越高,成为大家实现流程化办公和数字化转型的友好合作伙伴。作为专业的服务商,流辰信息潜心研发低代码技术平台产品及可视化表单设计工具,轻松助力越来越多行业的客户朋友提高办公效率,创造更大市场价值。1、低代码技术平台的市场价值......
  • form 表单提交 保存的时候再提交文件,之前一直是选择文件就传了,这个也比较好
    form表单提交保存的时候再提交文件,之前一直是选择文件就传了,这个也比较好代码<Upload:action="action":max-size="maxSizeMb":format="format":show-upload-list="false"multiple......