最近项目中使用了laydate插件,需要限制开始时间和结束时间的输入

1.type=date

要求:周期开始时间和周期结束时间以天为单位,结束时间不能早于开始时间,可以是同一天。

周期开始时间:<input class="layui-input" type="text" id="CycleStartTime">
周期结束时间:<input class="layui-input" type="text" id="CycleEndTime">
 
var cycleStart = laydate.render({
  elem: '#CycleStartTime'
  ,type: 'date'
  ,btns: ['confirm']
  ,done: function(value, date){
    cycleEnd.config.min = getDateArray(date);
  }
});
var cycleEnd = laydate.render({
  elem: '#CycleEndTime'
  ,type: 'date'
  ,btns: ['confirm']
  ,done: function(value, date){
    cycleStart.config.max = getDateArray(date);
  }
});
function getDateArray(date){
  var formatDate = {};
  formatDate.year = date.year;
  formatDate.month = date.month - 1;
  formatDate.date = date.date;
  return formatDate;
}
 

2.type=datetime

要求:开始时间早于结束时间,且不能相同

开始时间:<input class="layui-input" type="text" id="StartTime">
结束时间:<input class="layui-input" type="text" id="EndTime">
 
var editStart = laydate.render({
  elem: '#StartTime'
  ,type: 'datetime'
  ,btns: ['confirm']
  ,done: function(value, date) {
    editEnd.config.min = {
      year: date.year,
      month: date.month - 1,
      date: date.date,
      hours: date.hours,
      minutes: date.minutes,
      seconds: date.seconds + 1
    };
    if (date.seconds == 59) {
      editEnd.config.min.minutes = date.minutes + 1;
      editEnd.config.min.seconds = 0;
    }
    if (date.seconds == 59 && date.minutes == 59) {
      editEnd.config.min.hours = date.hours + 1;
      editEnd.config.min.minutes = 0;
      editEnd.config.min.seconds = 0;
    }
    if (date.seconds == 59 && date.minutes == 59 && date.hours == 23) {
      editEnd.config.min.date = date.date + 1;
      editEnd.config.min.hours = 0;
      editEnd.config.min.minutes = 0;
      editEnd.config.min.seconds = 0;
    }
  }
});
var editEnd = laydate.render({
  elem: '#EndTime'
  ,type: 'datetime'
  ,btns: ['confirm']
  ,done: function(value, date) {
    editStart.config.max = {
      year: date.year,
      month: date.month - 1,
      date: date.date,
      hours: date.hours,
      minutes: date.minutes,
      seconds: date.seconds - 1
    }
    if (date.seconds == 0) {
      editStart.config.max.minutes = date.minutes - 1;
      editStart.config.max.seconds = 59;
    }
    if (date.seconds == 0 && date.minutes == 0) {
      editStart.config.max.hours = date.hours - 1;
      editStart.config.max.minutes = 59;
      editStart.config.max.seconds = 59;
    }
    if (date.seconds == 0 && date.minutes == 0 && date.hours == 0) {
      editStart.config.max.date = date.date - 1;
      editStart.config.max.hours = 23;
      editStart.config.max.minutes = 59;
      editStart.config.max.seconds = 59;
    }
  }
});
 
说明:输入限制的情况下,必须去掉【清空】、【现在】按钮。
 

3.type=time

要求:开始时间早于结束时间,且不能相同

开始时间:<input class="layui-input" type="text" id="StartTime_add">
结束时间:<input class="layui-input" type="text" id="EndTime_add">
var addStart = laydate.render({
  elem: '#StartTime_add'
  ,type: 'time'
  ,btns: ['confirm']
  ,done: function(value, date) {
    addEnd.config.min = {
      year: date.year,
      month: date.month - 1,
      date: date.date,
      hours: date.hours,
      minutes: date.minutes,
      seconds: date.seconds + 1
    };
    if (date.seconds == 59) {
      addEnd.config.min.minutes = date.minutes + 1;
      addEnd.config.min.seconds = 0;
    }
    if (date.seconds == 59 && date.minutes == 59) {
      addEnd.config.min.hours = date.hours + 1;
      addEnd.config.min.minutes = 0;
      addEnd.config.min.seconds = 0;
    }
    if (date.seconds == 59 && date.minutes == 59 && date.hours == 23) {
      $('.laydate-footer-btns').css({
        'cursor': 'not-allowed',
        'color': '#d2d2d2'
      });
      alert('开始时间不允许选择23:59:59');
    }
  }
});
var addEnd = laydate.render({
  elem: '#EndTime_add'
  ,type: 'time'
  ,btns: ['confirm']
  ,done: function(value, date) {
    addStart.config.max = {
      year: date.year,
      month: date.month - 1,
      date: date.date,
      hours: date.hours,
      minutes: date.minutes,
      seconds: date.seconds - 1
    }
    if (date.seconds == 0) {
      addStart.config.max.minutes = date.minutes - 1;
      addStart.config.max.seconds = 59;
    }
    if (date.seconds == 0 && date.minutes == 0) {
      addStart.config.max.hours = date.hours - 1;
      addStart.config.max.minutes = 59;
      addStart.config.max.seconds = 59;
    }
    if (date.seconds == 0 && date.minutes == 0 && date.hours == 0) {
      $('.laydate-footer-btns').css({
        'cursor': 'not-allowed',
        'color': '#d2d2d2'
      });
      alert('结束时间不允许选择00:00:00');
    }
  }
});
说明:开始时间不允许选择23:59:59,结束时间不允许选择00:00:00。

laydate type=time/datetime/date 开始时间和结束时间的输入限制的更多相关文章

  1. My97DatePicker:开始时间和结束时间的最大间隔为1个月30天,并且不大于当前时间(3种方法)

    问题的背景 在之前做Web项目的时候,开始时间和结束时间,只有2个要求: 1.开始时间必须小于等于结束时间,不能超过当前时间. 2.结束时间必须大于等于开始时间,不能超过当前时间. 由于开始时间不大于 ...

  2. myDate97 设置开始时间和结束时间

      myDate97 设置开始时间和结束时间 CreationTime--2018年8月28日16点46分 Author:Marydon 1.简单示例 第一步:引入My97DatePicker/Wda ...

  3. datepicker约束开始时间和结束时间

    datepicker约束开始时间和结束时间作用就是:选择要搜索的日期范围. <!DOCTYPE html> <html lang="en"> <hea ...

  4. elementui的时间选择器开始时间和结束时间的限制

    开始时间不能大于结束时间 html代码部分 方法部分 开始时间和结束时间可以选同一天 <template> <div class="range-wrapper"& ...

  5. 更改hadoop集群yarn的webui中的开始时间和结束时间为本地时间

    yarn集群的webui地址为:http://rm:8088 执行任务后,任务的开始时间和结束时间都是utc时间,查看很不方便. 查找相关资料发现hadoop有补丁包,补丁地址:https://iss ...

  6. c# 获取 本周、本月、本季度、本年 的开始时间或结束时间

    #region 获取 本周.本月.本季度.本年 的开始时间或结束时间 /// <summary> /// 获取结束时间 /// </summary> /// <param ...

  7. My97DatePicker 日期控制,开始时间不能>结束时间,结束时间不能<开始时间

    <li>日期: <input type="text" style="margin-top: 5px;" value="${begin ...

  8. java获取本月开始时间和结束时间、上个月第一天和最后一天的时间以及当前日期往前推一周、一个月

    import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date; import java.uti ...

  9. easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大

    easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大 >>>>>>>>>>> ...

随机推荐

  1. 工程没有生成lib文件,只生成了dll文件

    解决办法: 在工程上右键 -> 添加 -> 新建项 -> 选"模块定义文件(.def)" -> 随便填写个名字 -> 添加 重新编译编译就可生成.li ...

  2. 深入浅出Cocoa之类与对象【转】

    最近打算写一些ObjC中比较底层的东西,尤其是 runtime 相关的.苹果已经将 ObjC runtime 代码开源了,我们可以从:http://opensource.apple.com/sourc ...

  3. 【JZOJ4744】【NOIP2016提高A组模拟9.2】同余

    题目描述 输入 输出 样例输入 5 2 1 5 2 3 7 1 3 2 1 2 5 3 0 样例输出 2 1 数据范围 解法 题目允许离线,且没有修改操作. 考虑把一个询问拆分成两个形如"a ...

  4. node 写的简单爬虫(一)

    安装cheerio npm install cheerio --save 引入http和cheeri var http=require("http"); var cheerio=r ...

  5. 2019-10-31-C#-强转空会不会出现异常

    title author date CreateTime categories C# 强转空会不会出现异常 lindexi 2019-10-31 8:53:6 +0800 2019-9-10 11:4 ...

  6. python LEGB原理简要介绍

  7. docker在windows下的安装

    Docker for Windows会默认包含两个引擎containers(linux和windows) 1. 下载Docker for Windows,https://docs.docker.com ...

  8. 如何实现两个input框的同步更新

    class MVVM { constructor(options) { this.$options = options; this.$el = options.el; this.$data = opt ...

  9. 防止chrome主页被篡改并设置为默认打开无痕浏览方式

    1. 找到chrome的快捷方式, 右击打开属性 2. 将目标框内容改为以下内容chrome.exe的目录位置 // ----- 引号中的内容为"PATH\Chrome\Applicatio ...

  10. qt开发ROS gui 遇到:global.h:1087:4: error: #error &quot;You must build your code with position independent code if Qt was built with -reduce-relocations. &quot......

    具体错误如下: 一共出现38个错误 这个错误是在导入cmakelists.txt时产生的,其实不是工程本身的问题,是因为我卸载ros,再重新安装ros的过程中把qtcreator的部分包给删除了,导致 ...