因项目需求需要多个日期,然后点击日期就会出现闪现的情况,导致选择不了日期

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 点击日期闪现的更多相关文章

  1. Extjs DateTime 日期时间选择控件 (非点击日期强制选择) 支持4.0以上

    Extjs的日期控件,仅仅能支持到日期选择,对时间的选择并不完好.而网上下载的控件,都是基于Ext.form.dateField 开发.在选中日期后自己主动选择,并隐藏此选择窗体. 在经过一番改造后, ...

  2. JS双月份显示联动效果,点击日期浮出消息提示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. JavaScript 日期选择器 Pikaday

    找一些插件的过程实在太痛苦了...好容易找到一个,赶紧记录下.免得以后重复浪费时间在这上面. 插件名:Pikaday github地址:https://github.com/dbushell/Pika ...

  4. my97日期控件

    http://www.seabroad.cn/cq/datepick/demo.htm 但是由于某些原因,担心这个网站不稳定,所以复制一下 一. 简介 1. 简介 目前的版本是:4.0 Prerele ...

  5. jsp日期插件My97DatePicker

    jsp日期插件My97DatePicker 强大的日期控件 使用方便简单 (2010-10-30 18:59:12) 转载▼ 标签: js javascript 日期插件 jsp it 分类: jqu ...

  6. 9.Android之日期对话框DatePicker控件学习

    设置日期对话框在手机经常用到,今天来学习下. 首先设置好布局文件:如图 xml对应代码 <?xml version="1.0" encoding="utf-8&qu ...

  7. My97DatePicker日期控件用法

    用法很简单,主要演示都在myDate.html  <meta http-equiv="content-type" content="text/html; chars ...

  8. HTML5 input新增的几种类型(数字、日期、颜色选取、范围)

    你可能已经听说过,HTML5里引入了几种新的input类型.在HTML5之前,大家熟知的input类型包括:text(输入框),hidden(隐藏域),submit(提交按钮)等.而HTML5到来之后 ...

  9. Highcharts使用=====通过指定日期显示曲线

    1.说明: 利用HighStock显示曲线,在右上角的日期间隔选择好日期后,重新请求后台数据,重新加载曲线. 2.实现方法: 在HighStock的rangeSelector中有一个属性inputDa ...

随机推荐

  1. IntelliJ IDEA 2017版 开发SpringBoot的全局配置文件使用

    一.全局配置文件 描述:     Spring Boot项目使用一个全局的配置文件application.properties或者是application.yml,在resources目录下或者类路径 ...

  2. arcgis api for flex 开发入门(一)环境搭建

    http://www.cnblogs.com/wenjl520/archive/2009/06/02/1494514.html arcgis api for flex 开发入门(一)环境搭建arcgi ...

  3. 使用idea,springboot,springsession,redis实现分布式微服务的session 共享

    本次开发环境:idea2016.3.4 +jdk1.8+maven3.3.9+redis+springboot+jedis 本文中的项目使用Maven来管理项目依赖,使用Spring Session和 ...

  4. 安卓添加USB外置UVC摄像头

    实现的方法有很多种,按步骤来看适合哪一种,网上说什么接采集卡,其实就是把AV转成UVC,现在市面上很多摄像头直接就已经是UVC的了,在windows上面即插即用. 安卓也是Linux,这个就好办了. ...

  5. 第一章 JVM内存结构

    注意:本系列博客,主要参考自以下四本书 <分布式Java应用:基础与实践><深入理解Java虚拟机(第二版)><深入分析Java web技术内幕><实战jav ...

  6. Jack Clark 的几句名言

    Grateful for everything; entitled to nothing. 沒有任何事情是你不该感激的:沒有任何东西是你该派得到的. Leadership is the ability ...

  7. eclipse中java build path下 allow output folders for source folders 无法勾选,该如何解决 eclipse中java build path下 allow output folders for source folders 无法勾选,

    在创建maven工程时,在设置output folders时,总是勾选以后,老是自动恢复到原来的状态,对比其他的maven的工程发现是在创建maven时候选择的项目为pom,而不是war或者jar,将 ...

  8. Oracle定义DES加密解密及MD5加密函数

    http://blog.csdn.net/xdweleven/article/details/38319351   (1)DES加密函数create or replace functionencryp ...

  9. Android-Android/APP-理解

    Android 1.Google Android 给出的官方Android架构图就是大家都知道的四层,第一层是应用层(就是很多能够看得到的应用),第二层是应用框架层(为application提 供各种 ...

  10. Failed to get D-Bus connection: Operation not permitted

    通过centos7镜像创建了一个docker容器,并在容器中安装了一个apache服务,但是启动时发生如下报错 [root@1346963c2247 ~]# rpm -qa | grep httpdh ...