laydata 点击日期闪现
因项目需求需要多个日期,然后点击日期就会出现闪现的情况,导致选择不了日期
html代码
<table class="form">
<tr>
<th class="formTitle">开始日期:</th>
<td class="formValue" colspan="2">
<input id="StartDate" name="StartDate" type="text" class="form-control layui-input test-item" placeholder="开始日期" /> </td>
</tr>
<tr>
<th class="formTitle">计划完成日期:</th>
<td class="formValue" colspan="2">
<input id="EndDate" name="EndDate" type="text" class="form-control layui-input test-item" placeholder="计划完成日期"/>
</td>
</tr>
<tr>
<th class="formTitle">实际完成日期:</th>
<td class="formValue" colspan="2">
<input id="ActualDate" name="ActualDate" type="text" class="form-control layui-input test-item" placeholder="实际完成日期"/>
</td>
</tr>
</table>
js
前提需要引入laydata.js
最重要的js
//同时绑定多个日期
lay('.test-item').each(function () { //test-item是引入日期所需要加入的类名
laydate.render({
elem: this ,
trigger: 'click'
});
});
<script>
laydate.render({
elem: '#StartDate', //指定元素
format: 'yyyy-MM-dd',
istime: false, //是否显示分钟
istoday: true, //是否显示今天
theme: '#1ABC9C',
choose: function (datas) {
var now = new Date(laydate.now().replace("-", "/"));
var add = new Date(datas.replace("-", "/"));
add = new Date(add.getTime() + 30 * 24 * 60 * 60 * 1000);
if ((now.getMonth() + 1) < (add.getMonth() + 1)) {
end.min = laydate.now();
} else if ((now.getMonth() + 1) == (add.getMonth() + 1) && now.getDate() < add.getDate()) {
end.min = laydate.now();
}
else {
add = add.getFullYear() + "/" + (add.getMonth() + 1) + "/" + add.getDate();
end.min = add;
}
end.min = datas;
},
});
laydate.render({
elem: '#EndDate', //指定元素
format: 'yyyy-MM-dd',
istime: false, //是否显示分钟
istoday: true, //是否显示今天
theme: '#1ABC9C',
choose: function (datas) {
var max = new Date(datas.replace("-", "/"));
max = new Date(max.getTime() - 30 * 24 * 60 * 60 * 1000);
max = max.getFullYear() + "/" + (max.getMonth() + 1) + "/" + max.getDate();
start.max = datas;
start.min = laydate.now();
},
});
laydate.render({
elem: '#ActualDate', //指定元素
format: 'yyyy-MM-dd',
istime: false, //是否显示分钟
istoday: true, //是否显示今天
theme: '#1ABC9C',
choose: function (datas) {
var now = new Date(laydate.now().replace("-", "/"));
var add = new Date(datas.replace("-", "/"));
add = new Date(add.getTime() + 30 * 24 * 60 * 60 * 1000);
if ((now.getMonth() + 1) < (add.getMonth() + 1)) {
end.min = laydate.now();
} else if ((now.getMonth() + 1) == (add.getMonth() + 1) && now.getDate() < add.getDate()) {
end.min = laydate.now();
}
else {
add = add.getFullYear() + "/" + (add.getMonth() + 1) + "/" + add.getDate();
end.min = add;
}
end.min = datas;
},
});
</script>
laydata 点击日期闪现的更多相关文章
- Extjs DateTime 日期时间选择控件 (非点击日期强制选择) 支持4.0以上
Extjs的日期控件,仅仅能支持到日期选择,对时间的选择并不完好.而网上下载的控件,都是基于Ext.form.dateField 开发.在选中日期后自己主动选择,并隐藏此选择窗体. 在经过一番改造后, ...
- JS双月份显示联动效果,点击日期浮出消息提示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JavaScript 日期选择器 Pikaday
找一些插件的过程实在太痛苦了...好容易找到一个,赶紧记录下.免得以后重复浪费时间在这上面. 插件名:Pikaday github地址:https://github.com/dbushell/Pika ...
- my97日期控件
http://www.seabroad.cn/cq/datepick/demo.htm 但是由于某些原因,担心这个网站不稳定,所以复制一下 一. 简介 1. 简介 目前的版本是:4.0 Prerele ...
- jsp日期插件My97DatePicker
jsp日期插件My97DatePicker 强大的日期控件 使用方便简单 (2010-10-30 18:59:12) 转载▼ 标签: js javascript 日期插件 jsp it 分类: jqu ...
- 9.Android之日期对话框DatePicker控件学习
设置日期对话框在手机经常用到,今天来学习下. 首先设置好布局文件:如图 xml对应代码 <?xml version="1.0" encoding="utf-8&qu ...
- My97DatePicker日期控件用法
用法很简单,主要演示都在myDate.html <meta http-equiv="content-type" content="text/html; chars ...
- HTML5 input新增的几种类型(数字、日期、颜色选取、范围)
你可能已经听说过,HTML5里引入了几种新的input类型.在HTML5之前,大家熟知的input类型包括:text(输入框),hidden(隐藏域),submit(提交按钮)等.而HTML5到来之后 ...
- Highcharts使用=====通过指定日期显示曲线
1.说明: 利用HighStock显示曲线,在右上角的日期间隔选择好日期后,重新请求后台数据,重新加载曲线. 2.实现方法: 在HighStock的rangeSelector中有一个属性inputDa ...
随机推荐
- 2018.07.24 bzoj3531: [Sdoi2014]旅行(树链剖分+动态开点)
传送门 树链剖分. 如何维护? 如果颜色少直接每种颜色一颗线段树走人. 但这题颜色数量不大于1e5" role="presentation" style="po ...
- Django入门与实践-第22章:基于类的视图
http://127.0.0.1:8000/boards/1/topics/2/posts/2/edit/ http://127.0.0.1:8000/ #boards/views.py from d ...
- hadoop 学习之异常篇
本文旨在给予自己在学习hadoop过程中遇到的问题的一个记录和解决方法. 一. copyFromLocal: java.io.IOException: File /user/hadoop/slaves ...
- 重大发现 springmvc Controller 高级接收参数用法
1. 数组接收 @RequestMapping(value="deleteRole.json") @ResponseBody public Object deleteRole(S ...
- nexus 下载及安装
一.下载 nexus maven http://www.sonatype.org/ http://www.sonatype.org/nexus/ http://www.sonatype.org/nex ...
- DFS剪枝处理HDU1010
http://acm.hdu.edu.cn/showproblem.php?pid=1010 题意很好理解,不是最短路,而是dfs,虽然地图不算大,稍微注意一点的dfs也能险过,但是700+ms和78 ...
- eclipse 安装
做一个项目,需要搭建环境.使用sql server 2005,tomcat,eclipse.过程真复杂,碰到些小问题,不过都解决了,还算顺利. win7下sql server 2005安装:http: ...
- Internal Server Error - http code 500
Eror Example 1 :
- CAS实战の遇到的问题
1.客户端启动报错,报错信息如下: 严重: Exception starting filter CAS Single Sign Out Filter java.lang.IllegalArgument ...
- Sending Email In .NET Core 2.0
Consider the following written in .NET Core 2.0. SmtpClient client = ) { UseDefaultCredentials = tru ...