laydate 使用layui时间插件实现开始日期与结束日期控制在一定范围内

梦昼初心

于 2020-11-30 10:03:28 发布

阅读量1.2k

点赞数 1

分类专栏： layui

本文链接：https://blog.csdn.net/weixin_38171468/article/details/110194323

版权

本文介绍如何利用layui的时间插件laydate，设置开始日期和结束日期的范围限制，确保选定的时间段不超过一年。通过代码示例，详细阐述了开始时间与结束时间的逻辑控制，以及在用户选择过程中保持有效范围的方法。

摘要由CSDN通过智能技术生成

主要实现功能：
在这里插入图片描述
采集时间分为开始时间与结束时间，需限定时间段内数据在一年以内超过一年不允许进行选择；

实现代码及步骤：
1.首先考虑开始实现需要限定的时间，如果超出一年则不允许选择，若结束时间向前推移一个月此时开始时间也需要向前推一个月；
2.结束时间需要控制在当前时间范围内，如果修改时间需要将值付给开始时间限定的当前时间，将之前获取的时间进行置换；
3.最终实现效果，选择好结束时间后需要根据时间推断开始时间是否在限制范围内，若在限制范围内则允许选择，若不在限制范围内则不允许选择

实现代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="./frame/layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
<